I just load the image from assets folder and image not showing in the application. But when I load the image using network it loads perfectly.
(I am using linux flat form)
Here is the my code
class Splash extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: new Image.asset('assets/images/login_logo.png'),
//Image.network('https://mobile-di.com/wp-content/uploads/2018/08/flutter-review.jpeg'), //this works
),
);
}
}
in the pubspec.yaml file
assets:
- assets/images/login_logo.png
Make sure that you are adding assets under the flutter: in pubspec.yaml. Also, check if you are adding spaces before assets. In your example, please check with the path of that asset exist. And make sure that you have assets of that name in your project folder.
example:
flutter:
assets:
- lib/img_package/example.png
Related
New to Bloc and love having a structured app!
I used the firebase login example:
Flutter Firebase Login Tutorial
Works great and great example. Building upon this example I decided to do it step by step (avoid big mistakes).
I created a bottom navigation with an appbar that has a logout icon. Clicked on logout and it works.
Now I wanted to move the logout to the navigation drawer. I created a statelessWidget dart file called DrawerItems and then I call it from my bottom navigation file (within my scaffold). Here is part of the code of the DrawerItems:
DrawerListItem(
navListIcon: const Icon(Icons.logout_sharp),
strTitle: "Logout",
myFunction: () => context.read<AppBloc>().add(AppLogoutRequested()),
),
When I click on the logout icon, it doesn't do anything. Do I really need to make this statefulWidget? the whole point of bloc is to use stateful widgets as little as possible no?
any insight will be great!
Thank you in advance :D
Ok I figured it out... not really happy about this answer (I like having different files for everything), so if any of you know why this is happening feel free to drop a comment!
I removed the "myFunction" that I was passing and put the read bloc line directly in the drawer stateless class and it worked.
so this is my final code (I kept the old code there too FYI):
Widget build(BuildContext context) {
const drawerHeader = UserAccountsDrawerHeader(
accountName: Text("Account Name"),
accountEmail: Text("Account Email"),
currentAccountPicture: CircleAvatar(
child: FlutterLogo(size: 42.0),
),
);
return ListView(
children: [
drawerHeader,
// DrawerListItem(
// navListIcon: Icon(Icons.account_circle_sharp),
// strTitle: "Account information",
// ),
// DrawerListItem(
// navListIcon: Icon(Icons.filter_list_sharp),
// strTitle: "Filter",
// ),
ListTile(
leading: const Icon(Icons.logout_sharp),
title: const Text("Logout"),
onTap: () {
context.read<AppBloc>().add(AppLogoutRequested());
Navigator.pop(context);
},
),
// DrawerListItem(
// navListIcon: const Icon(Icons.logout_sharp),
// strTitle: "Logout",
// myFunction: () => context.read<AppBloc>().add(AppLogoutRequested()),
// ),
],
);
}
I'm writing an App (1st time) with Flutter on MacOS from VS Code.
All works but when I run the app it is very slow with the synchronization, I mean that if I change something in the home screen, save then click "run on iOS device" it loads the old version, ignoring my edits but after a random time it loads the right version with the correct edits.
I'm working on Catalina 10.15.4 (macbook pro 13 inch early 2015, Xcode updated to the latest version).
This is the code wrote in the home screen, other files are unchanged from the original template.
(I added 3 Images to the LaunchScreen and an other for the Android splash screen).
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BuddyLang'),
centerTitle: true,
backgroundColor: Colors.orange,
),
body: Center(
child: FlatButton(
onPressed: (){},
child: Text('click me'),
),
),
);
}
}
Try Flutter clean and then Restart your app and also check this happen is Flutter run --release
I am trying to show a CircleAvatar at the top of the main screen of my App, but I am running into a rather silly issue. I am unable to figure out how to provide an object of the class Image (that is a property of a user) as an ImageProvider, which is what CircleAvatar expects. Is there an easy way to "typecast" here or some other way people have resolved this?
class _HomePageState extends State<PictureShowcaseHome>{
Appuser appuser = new Appuser();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: InkWell(
child: CircleAvatar(
backgroundImage: appuser.img,
child: Text(appuser.name.substring(0,1).toUpperCase()),
) ,
),
...
To simplify things, assume an Appuser has just the following properties:
class Appuser{
String name;
Image img;
Appuser(){
this.name = "Unknown user";
this.img = Image.asset('assets/imgs/default1.jpg');
}
}
My idea is that I have a default image that is included in the assets, but the user can replace it with their own image (seems like a rather standard idea). I considered switching to AssetImage img; and img = new AssetImage('assets/imgs/default1.jpg'); in the constructor for Appuser, but that sort of seems backwards. It also gets me into the "opposite" problem, when I display the user image on a user information details page (I thought of just having a ListTile( title: appuser.img,),) or when I let the user take a new user picture with the camera. For those purposes, it is easiest to directly work with an object of class Image, not an AssetImage.
Or am I somehow looking at this the wrong way?
This
Image.asset('assets/imgs/default1.jpg').image
should work.
For the sake of clarity, the Image class has an ImageProvider property. Just get the ImageProvider using .image with any given Image class. This works for Image.asset, .file, .network, and .memory
.image will give you the ImageProvider that is needed.
CircleAvatar(
backgroundColor: Colors.red,
radius: radius,
child: CircleAvatar(
radius: radius - 5,
backgroundImage: Image.file(
profileImage,
fit: BoxFit.cover,
).image,
),
)
I want to write a readable and beautiful code so that anyone could understand it, as well as the code can be maintainable and scalable.
my code is that is it good or no?
Create stateless widgets for smaller UI Components and compose bigger widgets or pages using these reusable UI widgets. for example :
Widgets Folder:
custom_text.dart (a widget that gives me simple centered text).
custom_button.dart (a custom reusable component).
Pages Folder:
home_page.dart(a widget that includes a scaffold with custom_card
inside)
login_page.dart
here's an example
void main() => runApp(HomePage ());
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: SimpleTextWidget(),
),
);
}
}
this is a small reusable component to be used in your other parent widget.
class SimpleTextWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Text('Hello'),);
}
}
You can maintain different files for keeping widgets and use the import statements for using them in any file. This will also make your code re-usable.
For writing a beautiful code, you must follow the indentation properly and you can also add useful comments to the code which will increase the readability of your code.
I've started to learn Flutter Framework and high GPU load when I'm trying to render a list of images which come from the network and have high resolution.
I've created test project on github for demo https://github.com/troublediehard/flutter_imageList_high_gpu_load
Am I doing anything wrong? Is there way to optimise images before render?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Image loading test'),
),
body: buildLists(),
),
);
}
Widget buildLists() {
final imageUrls1 = [
'https://via.placeholder.com/2000',
'https://via.placeholder.com/2001',
'https://via.placeholder.com/2002',
];
final imageUrls2 = [
'https://via.placeholder.com/2003',
'https://via.placeholder.com/2004',
'https://via.placeholder.com/2005',
];
return Column(
children: <Widget>[
buildList(imageUrls1),
buildList(imageUrls2),
],
);
}
buildList(List<String> urls) {
return Container(
height: 150,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: urls.length,
itemBuilder: (context, index) {
return Image.network(
urls[index],
height: 130,
width: 130,
);
}),
);
}
}
There is an open issue in Flutter that characterizes this problem (see this github issue, in particular the links to three issues created from it) as of mid-January 2019. Hopefully it will be resolved sooner rather than later, as more people have been running into it, but I get the impression there's quite a lot of internal discussion around how to properly handle high-res images as it needs to be a flexible and robust solution that works for many use-cases. I believe the high GPU load you're seeing is probably the result of loading up the entire set of images into the GPUs texture buffer, although as a comment states you should expect much difference performance on a real device and in release mode.
The current advice from the flutter devs is to use lower resolution images (i.e. set up your server to serve thumbnails). While this is a slightly annoying response, it is actually something you should think about doing anyways as when you download high-res photos you're 1) using bandwidth, 2) using server memory/processing power, and 3) using additional phone memory (even if images are resized before showing this would still be true). Serving thumbnails should result in a better user experience, even if it means that the both the low-res and high res photos are downloaded separately (when the user taps on the thumbnail for example).