I am wondering why is it that my GridView is not rendering the widgets. I am trying to render the buttons in two columns and 2-3 rows.
The code is the following:
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
GridView.count(
shrinkWrap: true,
primary: true,
crossAxisCount: 2,
children: <Widget>[
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Wifi')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
],
)
],
)));
}
}
I get an error, in the android emulator it renders yellow and black strips instead of the buttons with the corresponding images.
Wrap it with Container ( height: .. , width : double.infinity )
Or with SizedBox
Try removing the Column widget above the GridView
Related
I am trying to move the button to the bottom of the screen but in vain. I basically have 2 textEditingControllers and a button but the latter keeps sticking with the textEditingController. Any advice, please?
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
physics: const ScrollPhysics(),
child: Column(
children: [
return Card(
elevation: 5,
clipBehavior: Clip.antiAlias,
margin: const EdgeInsets.all(0),
child: Container(
padding: const EdgeInsets.all(15),
child: Row(
children: [
Column(
),
Expanded(
child: Column(
children: [
LocationField(
isDestination: false,
textEditingController: sourceController),
LocationField(
isDestination: true,
textEditingController: destinationController),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(5),
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Bottom Button '), // trying to move to the bottom
),
),
)
],
);
}
Where am I going wrong?
If you are in Scaffold and want to have some Button in a fixed position on the screen you can use floatingActionButton Property.
Example:
Scaffold(
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
floatingActionButton: Container(
height: 50,
margin: const EdgeInsets.all(10),
child: ElevatedButton(
onPressed: () {},
child: const Center(
child: Text('Hello'),
),
),
),
);
Of course floatingActionButton property is mainy used for FloatingActionButton but it's good to know that you can put there any widget (other types of buttons, Rows, Columns and others). For positioning this widget you can use 'floatingActionButtonLocation' Scaffold property.
Try below code
Column(
children: <Widget>[
Card(
elevation: 5,
clipBehavior: Clip.antiAlias,
margin: const EdgeInsets.all(0),
child: Container(
padding: const EdgeInsets.all(15),
child: Row(
children: [
Expanded(
child: Column(
children: [
Container(
width: 100,
height: 50,
color: Colors.red,
),
Container(
height: 50,
width: 100,
color: Colors.black,
),
],
),
),
],
),
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(5),
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text(
'Bottom Button '), // trying to move to the bottom
),
),
),
),
],
),
Result->
You can achieve it by making small changes in your code it self. you have to change the tree of your code as below.
Scaffold -> Body -> Column
Column First Child Should be wrapped with Expanded and then SinglechildScrollView then Column and remaining Widgets
And the Second Widget should be your Button.
This will make the Button to move to the end of the screen. I hope thats what you are trying to do.
But this way makes the Button visible on the screen all the time where as remaining widgets will be scrolling.
I have a flutter app that I want to add "stories" to, but I am unable to do so cause I can't place 3 buttons over an image.
That's my desired look...
And this is what I can do so far...
And this is my code:-
child: GestureDetector(
child: Center(
child: Stack(
alignment: Alignment.bottomRight,
children: [
Image.network(
widget.url,
),
Container(
child: Column(children: [
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
)
]),
)
],
),
),
onTap: () => controller.next(),
),
How can I achieve this effect?
Am I doing something with the Stack widget?
Using Positioned inside Stack can solve your problem, Below code may work for you, You can position the Container where you want it to be.
Widget build(BuildContext context) {
var ScreenHeight = MediaQuery.of(context).size.height;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Expenses App"),
backgroundColor: Colors.pink[900],
actions: [
IconButton(
icon: Icon(Icons.add),
// onPressed: () => startAddNewTransaction(context),
),
],
),
body: GestureDetector(
child: Center(
child: Stack(
// alignment: Alignment.bottomRight,
children: [
Image.network(
'https://picsum.photos/250?image=9',
),
Positioned(
top: ScreenHeight * 0.17,
child: Container(
child: Column(children: [
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
SizedBox(height: ScreenHeight * 0.01),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
SizedBox(height: ScreenHeight * 0.01),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
)
]),
),
)
],
),
),
// onTap: () => controller.next(),
),
),
);
}
The default mainAxisSize of Column is max, If you set MainAxisSize.min for all Column you will get Stack's alignment.
child: Column(
mainAxisSize: MainAxisSize.min,
As for the alignment of your desire UI, I prefer using Align widget to wrap the parent Column.
Align(
alignment: Alignment(-1, .5), //play with it
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
More about Align.
GestureDetector(
child: Center(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://st2.depositphotos.com/3759967/5593/i/600/depositphotos_55936567-stock-photo-swirling-frosty-multi-colored-fractal.jpg",
),
),
),
),
Positioned(
bottom: MediaQuery.of(context).size.height * 0.1,
child: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
),
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
),
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
)
]),
),
],
),
),
),
You can do like this, place image as background of a container, and your column in a positioned widget.
example
I did a Gridview.count for rendering 6 buttons in 2 columns and 3 rows, it's not rendering and instead of the components, it shows yellow and black stripes. I already set the height and the width, all wrapped in a container.
return Scaffold(
body: Container(
height: 450.0,
width: double.infinity,
child: GridView.count(
shrinkWrap: true,
primary: true,
crossAxisCount: 2,
children: <Widget>[
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Wifi')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
],
)));
}
}
Please, someone knows why it's not rendering properly? or have an alternative widget that might work better? Thanks.
This widget is imported in this one:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF88B4E0),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text('Help and FAQ',
style: TextStyle(fontSize: 18.0, color: Colors.white)),
centerTitle: true,
actions: <Widget>[
SearchButton(),
],
),
body: ListView(children: [
Stack(children: [
Container(
height: MediaQuery.of(context).size.height - 82.0,
width: MediaQuery.of(context).size.width,
color: Colors.transparent),
Positioned(
top: 75.0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45.0),
topRight: Radius.circular(45.0),
),
color: Colors.white),
height: MediaQuery.of(context).size.height - 100.0,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
SizedBox(height: 20.0),
Testing(),
],
),
)),
]),
]),
);
}
void moveBack() {
Navigator.pop(context);
}
}
I've been trying to center the content of a GridView in Flutter but I'm really running out of ideas and can't get it to work...
I want to center the content of the GridView inside white white container, but it always aligns right at the top of the container/GridView item.
Here are the codes:
Gridview
body: SafeArea(
child: Container(
width: double.infinity,
child: GridView.count(
// childAspectRatio: ,
crossAxisCount: _orientationRows,
children: <Widget>[
Container(
width: double.infinity,
height: double.infinity,
child: Center(
child: MaterialButton(
child: MainIconBotton(
imageURL: "assets/icons/video.png",
label: "mainIcon.mp4".tr(),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ScreenVideo()),
);
},
),
),
),
/// (and so on)
MainIcon Widget (= content of a Gridview item)
return Container(
margin: EdgeInsets.all(7),
padding: EdgeInsets.all(9),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15), color: Colors.white),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 2,
child: Image.asset(
imageURL,
)),
SizedBox(
height: 5,
),
Expanded(
child: Text(
label,
textAlign: TextAlign.center,
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
),
)
],
),
);
I hope someone can help - thank you so much in advance!
Chris
take a column tag instead of the center in the gridview.
body: SafeArea(
child: Container(
width: double.infinity,
child: GridView.count(
// childAspectRatio: ,
crossAxisCount: _orientationRows,
children: <Widget>[
Container(
width: double.infinity,
height: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children:[MaterialButton(
child: MainIconBotton(
imageURL: "assets/icons/video.png",
label: "mainIcon.mp4".tr(),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ScreenVideo()),
);
},
)]
),
),
I am trying to display Listview using Listview builder below the purple color(as seen in the image)container with the below code:
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30,200,0),
child: IconButton(icon: Icon(Icons.arrow_back,),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(height: 20,),
Text('Semester 1',
style: TextStyle(color: Colors.white,
fontSize: 30),
)
],
)
),
Container(
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Card(
child: new Container(
child: new Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
)
],
),
);
It returns a blank screen after running the code,without showing any error. I am not able to figure out the problem.
Please help!
If you use listview is small and inside Column then you should add
shrinkWrap: true in ListView
Column(
children: <Widget>[
ListView(
shrinkWrap: true, // use it
)
],
)
Or If your ListView Height is fix then use
Column(
children: <Widget>[
SizedBox(
height: 200, // constrain height
child: ListView(),
)
],
)
or If you want to fill all remaining space the use
Column(
children: <Widget>[
Expanded(
child: ListView(...),
)
],
)
Simply wrap the ListView in Expanded. The error here is that ListView doesn't know how to size itself (it has unbounded height from the Column). Using Expanded will tell it to fill up all the remaining space and fix the sizing problem
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30,200,0),
child: IconButton(icon: Icon(Icons.arrow_back,),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(height: 20,),
Text('Semester 1',
style: TextStyle(color: Colors.white,
fontSize: 30),
)
],
)
),
Container(
child: Expanded( // <-- wrap with expanded
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Card(
child: new Container(
child: new Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
),
)
],
),
);
Error is caused by Container that is wrapping ListView. You need to specify bounds for that Container.
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
child: IconButton(
icon: Icon(
Icons.arrow_back,
),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(
height: 20,
),
Text(
'Semester 1',
style: TextStyle(color: Colors.white, fontSize: 30),
)
],
),
),
Container(
height: 300,
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Card(
child: Container(
child: Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
)
],
),
Above code should be working. Please note that, you don't need to specify "new" keyword in flutter.