i'm trying to do this page
but what i get is this
this is my code
SingleChildScrollView(
child: Column(
children: [
Center(
child: Container(
margin: EdgeInsets.all(20),
width: 230,
height: 40,
child: ElevatedButton(
onPressed: () {
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Color(0xff28CC61)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
),
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Add a book", style: TextStyle(
fontSize: 20
),),
),
),
),
),
Container(
child: Text("Explore between 10 books", style: TextStyle(
fontSize: 20
),),
),
Container(
//adding: EdgeInsets.all(12),
child: SingleChildScrollView(
child: GridView.builder(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1,
crossAxisSpacing: 20,
crossAxisCount: 2,
mainAxisSpacing: 8),
itemCount: books.length,
itemBuilder: (BuildContext ctx, index) {
return Container(
width: 50,
height: 100,
child: Card(
color: Color(0xFFEDEDED),
child: Column(
children: [
Image.asset(books[index].image, height: 150
,
width: 150,fit: BoxFit.cover,),
],
),
),
);
}),
),
),
],
),
),
ignore the colors and styles i want how to do the page
i stucked on gridview and how to write text below the picture + How can I fix my code to do it? So each image has same size as others? i tried to see the grid view documentation and i could not find anything.
Change childAspectRatio : 1 to childAspectRatio:0.7. childaspectRatio defines the ratio between width and height of children. If you set it as 1 you will get a square shaped widget. More than 1 is horizontal rectangle and less than 1 gives vertical rectangle.
Related
Tell me how to add widgets to the top and bottom of this list using GridView.builder?
I've tried using Column as well, but it doesn't work the way I wanted. What other options are there?
Widget build(BuildContext context)
{
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Stack(
children: [
LayoutBuilder(
builder: (context, constraints) {
return GridView.builder(...);
}
),
Padding(child: TextField(...))
],
),
);
}
Try below code:
SingleChildScrollView(
padding: const EdgeInsets.all(10),
child: Column(
children: [
Container(
width: double.infinity,
height: 50,
color: Colors.blue,
child: const Text(
'Your Apper Widget',
textAlign: TextAlign.center,
),
),
GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 9,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (context, index) {
return const Card(
child: ListTile(
title: Text('userList'),
),
);
},
),
Container(
width: double.infinity,
height: 50,
color: Colors.red,
child: const Text(
'Your Lower Widget',
textAlign: TextAlign.center,
),
),
],
),
),
Try this code :
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.red,
height: 48.0,
),
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (_, index) => const FlutterLogo(),
itemCount: 20,
),
),
Container(
color: Colors.green,
height: 48.0,
)
],
),
I'm New to flutter I want to make this design , it take me awhile to find what to use , but ever time i try to code it and use Listview it give me error ,or the card dont aligns to Gridview.
Try below code hope its helpful to you.refer GridView here
Center(
child: GridView.builder(
shrinkWrap: true,
padding: const EdgeInsets.symmetric(horizontal: 30),
itemCount: 4,
itemBuilder: (ctx, i) {
return Card(
child: Container(
height: 290,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Image.network(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png',
fit: BoxFit.fill,
),
),
Text(
'Title',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
Text(
'Subtitle',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
],
)
],
),
],
),
),
);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
crossAxisSpacing: 0.0,
mainAxisSpacing: 5,
mainAxisExtent: 264,
),
),
),
Your result screen->
You can use Gridview and return a Card of your custom style in Gridview Builder I will build your Required Design.
Here is the GridView Official Documentation.
[Documentation1
I am trying to centre a gridview in the centre of my scaffold but I am struggling to achieve this. I have tried wrapping in a Container with the alignment arguments as well as in a column and centre widgets. I have only been able to align my gridview in the centre horizontally. Can someone help? Here is my code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("My gridview"),
),
body: Center(
child: Padding(
padding: const EdgeInsets.only(left: 50, right: 50),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: MediaQuery.of(context).size.height * 0.4,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
height: double.infinity,
child: Center(
child: Text("Row Item 1"),
),
),
),
Expanded(
child: Container(
height: double.infinity,
child: Center(
child: Text("RowItem2"),
),
),
),
],
),
),
),
//CENTRE THE BELOW WIDGET IN MIDDLE OF SCREEN
Expanded(
child: Container(
child: GridView.builder(
shrinkWrap: true,
itemCount: 10,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
//The maximum horizontal width of a single child Widget
maxCrossAxisExtent: 50,
// horizontal spacing between individual child widgets
mainAxisSpacing: 10.0,
//Vertical vertical spacing between individual child widgets
crossAxisSpacing: 10.0,
),
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text(
index.toString(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),);
},
),
),
)
],
),
),
),
);
}
Try the following, maybe your widget is taking constraints from its parents
SizedBox(
width:MediaQuery.of(context).size.width,
child:Wrap(
alignment: WrapAlignment.start
children:[
//CENTRE THE BELOW WIDGET IN MIDDLE OF SCREEN
Expanded(
child: Container(
child: GridView.builder(
shrinkWrap: true,
itemCount: 10,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
//The maximum horizontal width of a single child Widget
maxCrossAxisExtent: 50,
// horizontal spacing between individual child widgets
mainAxisSpacing: 10.0,
//Vertical vertical spacing between individual child widgets
crossAxisSpacing: 10.0,
),
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text(
index.toString(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),);
},
),
),
)
],
),
),
Kindly try using a stack, As there is not pictorial representation of your expected result, I have tried according to your question statement, the code is here as follows (The colors have been changed for reference).
return Scaffold(
appBar: AppBar(
title: Text("My gridview"),
),
body: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
child: Center(
child: Text("Row Item 1"),
),
),
),
Expanded(
child: Container(
child: Center(
child: Text("RowItem2"),
),
),
),
],
),
SizedBox(
height: 30,
),
Container(
height: MediaQuery.of(context).size.height * 0.2,
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.05),
child: Expanded(
child: Container(
color: Colors.amber,
child: GridView.builder(
shrinkWrap: true,
itemCount: 100,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
//The maximum horizontal width of a single child Widget
maxCrossAxisExtent: 50,
// horizontal spacing between individual child widgets
mainAxisSpacing: 10.0,
//Vertical vertical spacing between individual child widgets
crossAxisSpacing: 10.0,
),
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text(
index.toString(),
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold),
),
),
);
},
),
),
),
),
],
)
],
),
);
Flutter - Gridview part is not visible on my screen after building the app
output on screen
Console Output:
console output
only the button part is visible but not the gridview part.
Can someone suggest what changes to do..
Here is the code:-
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
child: GridView.builder(
padding: EdgeInsets.all(20),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
),
itemCount: this.gameState.length,
itemBuilder: (context, index) {
SizedBox(
width: 50,
height: 50,
child: MaterialButton(
onPressed: () {
this.playGame(index);
},
child: Image(
image: this.getImage(this.gameState[index]),
),
),
);
},
)),
Container(
padding: EdgeInsets.all(20),
child: Text(this.message),
),
MaterialButton(
onPressed: () {
this.reset();
},
child: Text('Reset',
style: TextStyle(
color: Colors.white,
)),
color: Colors.black,
),
],
),
I just want to ask how can you remove the blank space when a Container is hidden?
As you can see my code below , I tried to put it in Visibility and empty Container , but it still taking up spaces from the GridView.count.
Code:
GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 2,
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
GestureDetector(
onTap: () => businessTypeClicked(1),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: pressed[1]
? Colors.green
: Colors.transparent, // set border color
width: 3.0), // set border width
),
padding: const EdgeInsets.all(15),
child: new Column(children: <Widget>[
Image.asset(
"assets/car.png",
height: 100,
width: 100,
),
Text('Automotive/Transportation',
textAlign: TextAlign.center,
style: TextStyle(color: Constants.colorPrimary))
]),
)),
Visibility(
visible: false,
child: Container(
color: Colors.white,
),
),
Visibility(
visible: false,
child: Container(
color: Colors.white,
),
),
]),
Image:
Use a conditional statement if on Container, it will allow you to hide/show widget wile rendering.
GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 2,
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Container(
height: 100,
width: 100,
color: Colors.red,
),
Container(
height: 100,
width: 100,
color: Colors.green,
),
if (false) // TODO: Condition
Container(
color: Colors.white,
),
if (false) // TODO: Condition
Container(
color: Colors.white,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
],
),
To hide the widget, try the Offstage widget
if attribute offstage:true //this will not occupy any physical space and will be invisible
if attribute offstage:false //this will occupy the physical space and visible
Offstage(
offstage: true,
child: Text("Visible"),
),