How do I put a image.network() inside a card?
new Card(
child: new Container(
Image.network(data[index]['image'], width:200.0, height: 200.0,fit: BoxFit.cover),
child: new Text(data[index]['title']),
padding: const EdgeInsets.all(20.0),
),
)
It works fine if I remove the Image.network(...) line.
new Card(
child: new Container(
child: new Text(data[index]['title']),
padding: const EdgeInsets.all(20.0),
),
)
I solved it myself but will put the code here just in case anyone else has this issue. As there is no documentation on how to do what I wanted to do. I am sure there maybe better ways to get the outcome like (text over the bottom of the image, but this question was how to get an image from network to show in a card)
new Card(
child: new Container(
child: new Column(
children: <Widget>[
Column(
children: <Widget>[
Image.network(data[index]['image'], fit: BoxFit.fitWidth),
Text(data[index]['title'], style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)),
]
),
],
),
),
)
I solved it myself but will put the code here just in case anyone else has this issue. As there is no documentation on how to do what I wanted to do. I am sure there maybe better ways to get the outcome like (text over the bottom of the image, but this question was how to get an image from network to show in a card)
new Card(
child: new Container(
child: new Column(
children: <Widget>[
Column(
children: <Widget>[
Image.network(data[index]['image'], fit: BoxFit.fitWidth),
Text(data[index]['title'], style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)),
]
),
],
),
),
)
Related
This is my source code:
Scaffold(
body: Center(
child: Container(
color: Colors.green,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
fit: FlexFit.loose, child: Image.asset('images/demo.png')),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Container(
color: Colors.yellow,
child: Text('Cancel'),
),
),
Expanded(
child: Container(
color: Colors.red,
child: Text('Okay'),
),
),
],
),
],
),
),
),
);
This is the result:
I want it to be like this:
without using fixed sizes because the image dimensions may vary.
I already tried to use flexible on the row children. The problem with that solution is that the green container is being expanded like this:
which I don't want to happen.
EDIT, Did a little more searching and found what you seem to be looking for:
The IntrinsicWidth widget makes sure children have uniform width, which will be the width of the widest element (without the overlapping issue like in the Stack widget based solution). So this code accomplishes what you're trying to do:
Scaffold(
body: Center(
child: IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Image.asset('images/demo.png'),
),
Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.yellow,
child: Text('Cancel'),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.red,
child: Text('Okay'),
),
),
],
),
],
),
),
),
);
Screenshot:
OLD ANSWER:
If you don't mind overlapping a little bit of the bottom of the image with the buttons, the stack class sizes itself to its non positioned children, so this would work for you:
Scaffold(
body: Center(
child: Stack(
fit: StackFit.loose,
children: [
Image.asset('images/demo.png'),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.yellow,
child: Text('Cancel'),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.red,
child: Text('Okay'),
),
),
],
),
),
],
),
),
);
Screenshot:
Maybe this will help.
You can use Spacer(); between the two text Cancel & Okay. Spacer() will put second text to end of row.
Row(
children[
Container(child: Text('Cancel', style...)),
Spacer(),
Container(Text('Okay', style...)),
]
);
maybe you can get the width of the image and pass it to the container that wraps the column:
import 'dart:io';
File image = new File('image.png'); // Or any other way to get a File instance.
var decodedImage = await decodeImageFromList(image.readAsBytesSync());
final width = decodedImage.width;
I want to fit a child image to the width of the column father.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network("Some image url"),
Text("Fitted image"),
],
),
I suggest the following chenges
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network("Your image url",
width: double.infinity,
fit: BoxFit.fitWidth,
),
Text("Fitted image"),
],
)
Well, I resolved my problem using MediaQuery.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Image.network("Some image url", fit: BoxFit.fill,),
width: MediaQuery.of(context).size.width,
),
Text("Fitted image"),
],
),
Maybe wrapping your Image with an Expanded Widget and give it BoxFit.fitWidth would also be useful. Or in case the times when you can't use MediaQuery.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 5,
child: Image.network(
"Some Image Url",
fit: BoxFit.fitWidth,
),
),
Text("Fitted image"),
],
),
If you need to control the size of elements in the column try to wrap all your widgets inside column with expanded widget and adjust elements sizes with flex value.
I'm working on a Flutter application and I can't figure out why my icon-buttons are not centered in the middle of the page.
I wrapped my code in a Center()
This is my page :
https://imgur.com/a/YlCW3Xu
This is my code:
import "package:flutter/material.dart";
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class LogInScreen extends StatefulWidget {
#override
_LogInScreenState createState() => new _LogInScreenState();
}
class _LogInScreenState extends State<LogInScreen> {
String _email, _password;
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Center(
child: ListView(
children: <Widget>[
Column(children: <Widget>[
new Container(
padding: (EdgeInsets.only(top: 50)),
child: Text(
"Sign In",
style: TextStyle(
fontSize: 40,
),
),
),
new Container(
padding: (EdgeInsets.only(top: 50, left: 35, right: 35)),
child: Column(children: <Widget>[
new Form(
child: new Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20),
child: new RaisedButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: const Text('Login'),
),
),
])),
])),
new Container(
padding: EdgeInsets.only(top: 40),
child: Column(
children: <Widget>[
new Text("Or login with"),
],
),
),
]),
new Center(
child: new Row(
children: <Widget>[
new IconButton(
icon: Icon(FontAwesomeIcons.facebookF),
color: Colors.blue,
),
new IconButton(
icon: Icon(FontAwesomeIcons.google),
color: Colors.blue,
),
],
)),
],
)),
);
}
}
I removed the texts field so the code would fit.
I hope you can help me,
Thank you for your help !
Set the padding for IconButton to 0, like so:
IconButton(
padding: EdgeInsets.zero,
...
)
None of the listed solution will work. The Only solution for me is to put IconButton inside SizedBox.
SizedBox(
width: double.infinity,
child: IconButton(
icon: FaIcon(FontAwesomeIcons.moneyBillWave),
iconSize: 80,
onPressed: () {},
),
),
A few changes :
Add shrinkWrap true to your ListView
ListView(
shrinkWrap: true,
...
Add mainAxisAlignment MainAxisAlignment.center to your Row
new Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
...
Basically Center() widget only center the row itself not the widgets within the row.
To align children in your row use mainAxisAlignment: MainAxisAlignment.centerfor horizontal alignment and crossAxisAlignment: CrossAxisAlignment.center for Vertical alignment see more here
so for your code it would be:
` new Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center
children: <Widget>[
new IconButton(
icon: Icon(FontAwesomeIcons.facebookF),
color: Colors.blue,
),
new IconButton(
icon: Icon(FontAwesomeIcons.google),
color: Colors.blue,
),
],
)),`
You don't need Center the icon because the problem was the Icon it self. Maybe the icon design contained padding or margin. My problem is on back button:
Container(
color: Colors.lightGreen,
child: Icon(
Icons.arrow_back_ios,
color: Colors.black,
size: 15,
),
),
When i change to Icons.arrow_back_ios_new, it back to normal:
Container(
color: Colors.lightGreen,
child: Icon(
Icons.arrow_back_ios_new,
color: Colors.black,
size: 15,
),
),
You need to find an icon that contained no padding/margin.
I have tried these
1. DecorationImage
2. Image
3. CircleAvatar
I have used Stack as there will be a background image.
But I am not able to understand why the image is expanding like that.
I need a circular image for the profile pic.
If I use Column instead of ListView then the images doesn't expand like this ...but I need a ListView.
The code:-
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 80.0,
width: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
image: AssetImage(Assets.cool),
fit: BoxFit.cover,
),
color: Colors.red,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: Image(
image: AssetImage(Assets.cool),
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
radius: 50.0,
backgroundImage: AssetImage(Assets.cool),
),
)
],
)
],
),
);
}
From my understanding you want the image in a circle not a ellipse. You can achieve that by wrapping the items in your listview with a Row element.
return Scaffold(
body: Stack(
children: <Widget>[
ListView(
children: <Widget>[
// Wrap with a row
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 80.0,
width: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
image: AssetImage("a.jpg"),
fit: BoxFit.cover,
),
color: Colors.red,
),
),
),
//...
],
),
],
)
],
),
);
To get a circular image, Just wrap all your widget of ListView in a Column widget and place the Column in ListView. You'll get a scrollable column.
ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 80.0,
width: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
image: AssetImage(Assets.cool),
fit: BoxFit.cover,
),
color: Colors.red,
),
),
),
//.....
],
)
],
),s
I have this Code:
new Container(
padding: new EdgeInsets.only(
top: 20.0,
),
alignment: FractionalOffset.centerRight,
child: new GestureDetector(
child: new Text('Forgot password?', style: new TextStyle(color: Color(0xFF2E3233))),
),
),
new Container(
width: 300.0,
height: 45.0,
alignment: FractionalOffset.center,
decoration: new BoxDecoration(
color: const Color(0xFF2E3233),
borderRadius: new BorderRadius.all(const Radius.circular(30.0)),
),
child: new Text("Sign in",style: new TextStyle(color: Colors.white,fontWeight: FontWeight.bold,letterSpacing: 0.3,),),
),
new Container(
padding: new EdgeInsets.only(
top: 20.0,
),
alignment: FractionalOffset.center,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new GestureDetector(
child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
),
new GestureDetector(
child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
onTap: moveToRegister,
),
],
),
),
Thats the result:
https://www.dropbox.com/s/bqu2tv6rej0ejlt/Screenshot_20181104-171155.png?dl=0
But I want to achieve this:
https://www.dropbox.com/s/754hempszq8xw5k/Screenshot_20181104-171202.png?dl=0
EDIT:
build method:
#override
Widget build(BuildContext context) {
return new Stack(
children: <Widget>[
// The containers in the background
new Column(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height * .44,
color: const Color(0xFF84A2AF),
padding: new EdgeInsets.only(
top: 50.0,
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
new Image.asset('assets/app_logo_transparent_bg.png',
height: 100.0,
width: 100.0,
),
],
),
),
new Container(
height: MediaQuery.of(context).size.height * .56,
color: Colors.white,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Align(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: buildSubmitButtons(),
),
),
],
)
/*child: new Align(
alignment: Alignment.bottomCenter,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: buildSubmitButtons(),
),
),*/
),
],
),
// The card widget with top padding,
// incase if you wanted bottom padding to work,
// set the `alignment` of container to Alignment.bottomCenter
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .33,
right: 15.0,
left: 15.0),
child: new Container(
height: 130.0,
width: MediaQuery.of(context).size.width,
child: new Card(
color: Colors.white,
elevation: 2.0,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: buildInputs(),
),
),
),
)
],
);
}
I tried so much but nothing seems to help? How I can align the Layout to the bottom...
Just a few changes on your container (.56) , remove the Align widget, stretch your Column and add an Expanded item inside your Column to fill the space available.
new Container(
height: MediaQuery.of(context).size.height * .56,
color: Colors.white,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: buildSubmitButtons(),
),
),
],
)
/*child: new Align(
alignment: Alignment.bottomCenter,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: buildSubmitButtons(),
),
),*/
),
Probably you will need to move your 'Forgot password' above the Expanded widget inside your Column.