This is my pubspec.yaml
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- images/img_rectangle1.jpg
I have established an assets folder and included it with my.png picture; but, I am experiencing difficulty with the widgets.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Korean vocabulary related to traits"),
centerTitle: false,
backgroundColor: const Color(0xFFEC74C8),
),
body: Row(
children: [
Expanded(
child: ListView.builder(
itemCount: koreanNameList.length,
itemBuilder: (context, index) {
KoreanItem item = koreanNameList[index];
return Draggable<KoreanItem>(
data: item,
dragAnchorStrategy: pointerDragAnchorStrategy,
feedback: KoreanNameCard(item: item),
child: KoreanNameCard(item: item));
},
)),
Expanded(
child: ListView.builder(
itemCount: englishanswers.length,
itemBuilder: (context, index) {
return buildEnglishanswerColumn(englishanswers[index]);
},
)),
],
),
);
}
Where exactly should the container that holds the background picture be placed, then?
I have tried to use
AssetImage
but it is not showing on my app.
You need to specify the assets on pubspec.yaml
Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.
Here is an example:
flutter:
assets:
- assets/images/background.png
To include all assets under a directory, specify the directory name with the / character at the end:
flutter:
assets:
- assets/
- assets/images/
sample using image asset
Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/splash/background.png"),
fit: BoxFit.cover,
),
),
child: const Center(
child: Text(
'Hello World!',
style: TextStyle(color: Colors.white),
),
),
);
Reference: Adding assets and images
For setting an image as the background, use this Container widget as the body of your Scaffold.
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image.jpg"),
fit: BoxFit.cover,
),
),
child: child
)
Replace image.jpg with your image name.
Related
I'm new to flutter-dart and I've been trying to load a image to my draw header, so far unsuccessfully. Can anyone shed some light on it? Please find my code below.
class MainDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
//color: Theme.of(context).backgroundColor,
image: DecorationImage(
image: AssetImage('assets/images/title_fb_600.png'),
fit: BoxFit.cover,
)),
child: Text("Some Text"),
//ListTile(
// leading: Icon(Icons.monetization_on),
// title: Text(
// "TRIPLE A",
// style: TextStyle(color: Colors.white, fontSize: 20),
// ),
),
ItemDrawer("Carteira Recomendada", Icons.star, 16),
ItemDrawer("Carteira R\$10", Icons.ten_k, 16),
ItemDrawer("Minha Carteira", Icons.favorite, 16),
ItemDrawer("Notícias", Icons.new_releases, 16),
ItemDrawer("Minha Conta", Icons.account_circle, 16),
ItemDrawer("Configurações", Icons.settings, 16),
],
),
);
}
}
My pubspec.yaml....
> flutter:
>
uses-material-design: true
>
assets:
> - assets/images/title3a_fb_600.png
And folder structure...
folder structure
Your pubspec file looks good. I'm assuming you only want to include this single image as an asset.
Try using this package, and replacing the DrawerHeader class with a ProgressiveImage component here.
https://pub.dev/packages/progressive_image
This package helps you to cache the image, to prevent having to reload it again, and it also adds a blur animation while it loads this asset.
If you need to layer the drawer header (and add other information, such as an avatar icon, or email information), you can add this component into a Stack collection, then make sure that the ProgressiveImage is the first in the Stack
If you also need to set a custom height to the drawer header, then make sure to wrap this Stack with a Container and manually set the height of this element
Can someone tell me why the picture cannot be displayed?
#
When I take a picture from the Internet with "NetworkImage" it works. Is there a local solution too?
#
I tried a lot around but even the posts here in the forum can not help me.
# To add assets to your application, add an assets section, like this:
assets:
- images/mio.jpg
-
import 'package:flutter/material.dart';
void main() {
runApp(Main());
}
class Main extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 250,
height: 250,
color: Colors.grey,
child: Stack(
children: <Widget>[
Container(
width: 200,
height: 300,
color: Colors.green,
),
Positioned(
top: 0,
right: 0,
child: Container(
width: 200,
height: 300,
child: Image(
fit: BoxFit.contain,
image: AssetImage(
'images/mio.jpg',
),
),
),
),
],
),
),
),
);
}
}
I get this error message
I'm not sure why you are getting this error but you should try
Asset.Image(
'images/mio.jpg',
fit: BoxFit.contain,
),
instead of
Image(
fit: BoxFit.contain,
image: AssetImage(
'images/mio.jpg',
),
),
another suggestion would be to not declare all your images in your pubspec.yaml, because there is a chance of human mistype error, you should just declare the root folder of your images, in your case
assets:
- images/
Here's three solution
First make sure that there's only one tap before assets and two taps before the image path
Second change these lines of code
Image(
fit: BoxFit.contain,
image: AssetImage(
'images/mio.jpg',
),
and write this instead that works for me
Image.asset(
'images/mio.jpg',
fit: BoxFit.cover,
),
Third use flutter clean than flutter run
It uses the background image for whole application.
So My plan is use Stack including backgroundimage and Scaffold on it.
In this code, it shows Title.png but dosent show BackGround.png
Where should I fix??
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: <Widget>[
new Image.asset('images/BackGround.png',
fit: BoxFit.cover,
),
Scaffold(
body: Center(
child: Image.asset('images/Title.png')
),
),
],
),
);
}
I think it is showing your "BackGround.png" image. But, "Title.png" image is overlay above it. That's why you're not able to view it.
To check out if it is rendered or not just replace your code as following,
home: Stack(
children: <Widget>[
Scaffold(
body: Center(
child: Image.asset('images/Title.png')
),
),
new Image.asset('images/BackGround.png',
fit: BoxFit.cover,
),
],
),
Stack always renders his first child, then second and then so on. So, in your case, whichever background you want to upload above all, should be on top.
Place your Scaffold inside Container with a background image and use Colors.transparent for Scaffold's backgroundColor property like this:
Container(
//your image here
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.jpg"),
fit: BoxFit.cover,
),
),
//your Scaffold goes here
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(),
),
);
I am trying to add NetworkImage inside Container but when I add .svg image I get error but it works for the other formats like .png, .jpeg, etc
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://upload.wikimedia.org/wikipedia/en/e/eb/Manchester_City_FC_badge.svg")
)
)
Error:
E/flutter (22336): [ERROR:flutter/lib/ui/painting/codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
Flutter Doesn't support svg format yet (issue).
You can use flutter_svg 0.13.0+2, a library to load and show svg files
another solution using flutter_svg package: info
final String assetName = 'assets/image.svg';
final Widget svg = SvgPicture.asset(
assetName,
semanticsLabel: 'Acme Logo'
);
For my case i was consuming an endpoint with Svgs :
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: countries.length,
physics: ScrollPhysics(),
itemBuilder: (context, index){
final Widget networkSvg = SvgPicture.network(
'${countries[index].flag}',
fit: BoxFit.fill,
semanticsLabel: 'A shark?!',
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator(
backgroundColor: Colors.redAccent,
)),);
return
Column(
children: [
ListTile(
title: Text('${countries[index].name}'),
leading: CircleAvatar(
backgroundColor: Colors.white,
child: networkSvg,
),
)
],
);
});
How can I assign an image dynamically in flutter ? For example:
final topContent = Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10.0),
height: MediaQuery.of(context).size.height * 0.5,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(lesson.imagePath),
fit: BoxFit.cover,
),
)),
Container(
height: MediaQuery.of(context).size.height * 0.5,
padding: EdgeInsets.all(40.0),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, .9)),
child: SingleChildScrollView(
controller: _scrollController,
child: Center(
child: topContentText,
),
),
),
Positioned(
left: 8.0,
top: 60.0,
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back, color: Colors.white),
),
)
],
);
Now the image at the start lesson.imagePath is what I want to change dynamically. I tried to use setState() but it gives me an error:
The expression here is a type of void and cannot be used
image: setState ((){
if (someCondition) {
return new AssetImage(lesson.imagePath);
}
}),
Your setState call is wrong! The most simple way is make your image as state of your widget and update this image inside a setState call. setState method does not returns nothing it just rebuilds your widget.
In your _WidgetState class you declare as member:
AssetImage _imageToShow;
You can provider a initial image inside initState method.
#override
initState(){
_imageToShow = AssetImage('youAssetImage');
}
Your Container widget should be declared as:
Container(
padding: EdgeInsets.only(left: 10.0),
height: MediaQuery.of(context).size.height * 0.5,
decoration: new BoxDecoration(
image: new DecorationImage(
image: _imageToShow,
fit: BoxFit.cover,
),
)),
),
And to update your image with setState call you just need:
void updateImage() {
setState ((){
if (someCondition) {
_imageToShow = new AssetImage(lesson.imagePath);
}
});
}
But remember that something has to call updateImage method.
The above solution can work also you can set an array of names and you can set the same image name in the assets folder and you can dynamically select the image where you want to use.
suppose in your case you have a list of lessons.
var lesson = ['a','b','c'];
In assets, folder give the same name to the images. (Don't forget to update the pubspec.yaml file)
Then in the AssetImage you can give the path which can be chosen dynamically.
image:AssetImage('assets/${lesson[index]}.jpg')
Remember to give the same name to the image like here a,b and c to the image.
Also the same extension to be given like here .jpg
image:AssetImage('assets/${lesson[index]}.jpg')