I have a GridView.builder to generate 2 'columns' of elements
This is my code:
ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: screenWidth * 0.05),
child: Text(
"MyText",
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
GridView.builder(
padding: EdgeInsets.only(
left: screenWidth * 0.05, right: screenWidth * 0.05),
shrinkWrap: true,
primary: false,
itemCount: 12,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context, index) {
return Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: screenWidth / 4.1 + screenWidth / 11,
child: Column(
children: <Widget>[
Container(
height: screenWidth / 4.1,
width: screenWidth / 2.5,
color: Colors.white,
),
Container(
height: screenWidth / 11,
width: screenWidth / 2.5,
color: Colors.blue,
),
],
),
),
),
);
},
),
],
),
As you can see in the image the title "MyText" and the elements of the GridView aren't vertically aligned. (Even though they have the same padding).
Is there a possibility to make them have the same alignment?
Thanks!
There's probably a better way to fix this, but that may require a redesign of how your widgets are laid out. I worked out a quick fix for you. Code below
ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: screenWidth * 0.05),
child: Text(
"MyText",
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
GridView.builder(
shrinkWrap: true,
primary: false,
itemCount: 12,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context, index) {
return Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: screenWidth / 4.1 + screenWidth / 11,
child: Column(
children: <Widget>[
Container(
height: screenWidth / 4.1,
width: screenWidth / 2.5,
color: Colors.white,
),
Container(
height: screenWidth / 11,
width: screenWidth / 2.5,
color: Colors.blue,
),
],
),
),
),
);
},
),
],
),
You can use the 'Flutter Inspector' - 'Show Debug Paint' to view the layout
Related
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.
I want to center all grid button inside red container but it is showing big space at bottom of red container..how to solve this
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.red,
height: MediaQuery.of(context).size.height*0.60,
width: MediaQuery.of(context).size.height*0.60,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
itemCount: 16,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context,index)=>
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(child: Center(child: Text(index.toString(),)),color: Colors.blue,),
)
,),
),
),
);
}
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.red,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.height,
child: Center(
child: SizedBox(
height: MediaQuery.of(context).size.height * 0.6,
child: GridView.builder(
padding: EdgeInsets.all(16),
itemCount: 16,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Center(
child: Text(
index.toString(),
)),
color: Colors.blue,
),
),
),
),
),
),
);
}
You can wrap the gridview.builder inside a sized box ( provided some height ) and wrap it under Center widget.
You can do it like this :
Center(
child: Container(
color: Colors.red,
height: MediaQuery.of(context).size.height * 0.60,
width: MediaQuery.of(context).size.height * 0.60,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column( // column
mainAxisAlignment: MainAxisAlignment.center, // center
children: [
Container( // if you don't have this container, there is an error
height: MediaQuery.of(context).size.height * 0.50, // new height
width: MediaQuery.of(context).size.height * 0.50, // new width
color: Colors.green,
child: GridView.builder(
padding: const EdgeInsets.all(0.0), // delete all padding from grid
itemCount: 20, // more items to scroll
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Center(
child: Text(
index.toString(),
)),
color: Colors.blue,
),
),
),
),
],
),
),
),
)
Enclose your Grid inside a Column to allow it to be centered, because if you don't do it I can't find another way to center it because the Grid is dynamic in height and could not be centered.
And with this, you delete the big space in the red container
I'm trying to design the following layout using flutter for a website, but I can't figure out the right pattern for doing so.
I tried many possibilities with columns and rows; I tried also using a stack, but whatever I use, either 3-4 won't become scrollable, or 5 won't take the height that it's given. Is there a workaround for this layout to be implemented?
You can easily accomplish what you want using this library.
flutter_staggered_grid_view
If you want your layout to take up entire screen, key is to use percentages of screen height for mainAxisExtent of StaggeredGridTile.extent
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(
MaterialApp(
home: AppView(),
),
);
}
class AppView extends StatelessWidget {
const AppView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
var list = List<int>.generate(100, (i) => i);
var height = MediaQuery.of(context).size.height;
return Scaffold(
body: StaggeredGrid.count(
crossAxisCount: 3,
axisDirection: AxisDirection.down,
mainAxisSpacing: height * 0.015,
crossAxisSpacing: height * 0.015,
children: [
StaggeredGridTile.extent(
crossAxisCellCount: 1,
mainAxisExtent: height * 0.08,
child: Container(
color: Colors.amber,
),
),
StaggeredGridTile.extent(
crossAxisCellCount: 1,
mainAxisExtent: height * 0.08,
child: Container(
color: Colors.amber,
),
),
StaggeredGridTile.extent(
crossAxisCellCount: 1,
mainAxisExtent: height * 0.08,
child: Container(
color: Colors.amber,
),
),
StaggeredGridTile.extent(
crossAxisCellCount: 2,
mainAxisExtent: height * 0.08,
child: Container(
color: Colors.red,
),
),
StaggeredGridTile.extent(
crossAxisCellCount: 1,
mainAxisExtent: height * 0.675,
child: Container(
color: Colors.blue,
),
),
StaggeredGridTile.extent(
crossAxisCellCount: 1,
mainAxisExtent: height * 0.81,
// mainAxisCellCount: 1.2,
child: Container(
color: Colors.pink,
child: ListView(
children: list.map((e) => Text(e.toString())).toList(),
),
),
),
StaggeredGridTile.extent(
crossAxisCellCount: 1,
mainAxisExtent: height * .58,
child: Container(
color: Colors.orange,
child: ListView(
children: list.map((e) => Text(e.toString())).toList(),
),
),
),
StaggeredGridTile.extent(
crossAxisCellCount: 2,
mainAxisExtent: height * .23,
child: Container(
color: Colors.teal,
),
),
],
),
);
}
}
Use this
Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
height: (MediaQuery.of(context).size.height) / 2,
child: Stack(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 2,
child: Column(
children: [
Container(
margin: EdgeInsets.all(4),
width: double.infinity,
height: (MediaQuery.of(context).size.height) / 8,
child: SizedBox(
height: 1,
width: 1,
child: const ColoredBox(color: Colors.amber),
)),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 2,
child: Container(
margin: EdgeInsets.all(4),
height:
(MediaQuery.of(context).size.height) / 3,
child: SizedBox(
height: 1,
width: 1,
child:
const ColoredBox(color: Colors.amber),
)),
),
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.all(4),
height: (MediaQuery.of(context).size.height) /
7.5,
child: SizedBox(
height: 1,
width: 1,
child:
const ColoredBox(color: Colors.amber),
)),
),
],
),
],
),
),
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.all(4),
height: ((MediaQuery.of(context).size.height) / 4) + 12,
child: SizedBox(
height: 1,
width: 1,
child: const ColoredBox(color: Colors.amber),
)),
),
],
),
Align(
alignment: Alignment.bottomRight,
child: Container(
padding: EdgeInsets.only(bottom: 20),
margin: EdgeInsets.all(4),
width: (MediaQuery.of(context).size.height) / 3.8,
height: (MediaQuery.of(context).size.height) / 5,
child: SizedBox(
height: 1,
width: 1,
child: const ColoredBox(color: Colors.amber),
)),
)
],
),
),
),
There is a github project for design a responsive screen.
The github link Flutter-Responsive-Admin-Panel-or-Dashboard
i need to show something like this
can some one help on this?
I can able to achieve following out put
i am using following code ::
GridView.builder(
scrollDirection: Axis.vertical,
physics: ScrollPhysics(),
shrinkWrap: true,
itemCount: 6,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 4),),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Container(
padding: EdgeInsets.all(0.0),
margin: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0xFF282f61),width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(
14.0) // <--- border radius here
),
),
child: Center(
child: Text(
'Avg-project',
style: TextStyle(
color: Color(0xFF17b01b),
fontSize: 14.0,
),
),
),
),
onTap: () {},
);
},
))
how can i achieve gridview with random width in flutter?
gridview is not support random width so instead of gridview you can use wrap widget to achieve your desired output.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: BackAppBar("Notifications", context),
body: Wrap(
children: [
"Help Moviing",
"Furniture Assembly",
"Mounting",
"Home Repairs",
"Personal Assistant",
"Delivery",
"Hard Work",
"Practice & Unpacking",
"Painting",
"Cleaning",
"Heavy Liffing"
].map((f) => GestureDetector(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
margin: EdgeInsets.only(
left: 5.0, right: 5.0, top: 10.0, bottom: 10.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0xFF282f61), width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(
10.0) // <--- border radius here
),
),
child: Text(f,
style: TextStyle(
color: Color(0xFF17b01b),
fontSize: 16.0,
),
),
),
onTap: () {},
))
.toList(),
),
);
}
i want to put a card between an image and the rest of the page
so i used stack in listview builder but it doesn't give the expected result
what i want
what i get => https://i.stack.imgur.com/Oxy41.jpg
ListView.builder(
itemCount: 1,
itemBuilder: (context, i) {
return Stack(
children: <Widget>[
first(_listviewurl, _listViewData[0], _listviewwe9t),
Container(
padding: EdgeInsets.all(40),
child: Text(
"News",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 32),
),
),
Positioned(
width: MediaQuery.of(context).size.width / 2.5,
height: MediaQuery.of(context).size.height / 5,
left: MediaQuery.of(context).size.width / 9,
top: MediaQuery.of(context).size.height / 1.9,
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Image.asset(
"images/img1.jpg",
fit: BoxFit.fill,
),
),
),
],
);
},
),
Because your card is in your listview and your listview's height is the same with your first Widget, you can add Container as parent widget of your Stack widget and set height for it:
Container(
child: Stack(...)
)