Flutter - Layout a Grid

Question

I am trying to layout a 4x4 grid of tiles in flutter  I managed to do it with columns and rows  But now I found the GridView component  Could anyone provide an example on how to do it using it   I can t really wrap my head around the docs  I don t seem to get the results I want

User · Answer

Please visit this repo   Widget  gridView         return GridView count        crossAxisCount  4        padding  EdgeInsets all 4 0         childAspectRatio  8 0   9 0        children  itemList            map               Item    gt  ItemList item  Item                          toList                 Below screenshot contains crossAxisCount  2

User · Answer

There are few named constructors in GridView for different scenarios   Constructors   GridView GridView builder GridView count GridView custom GridView extent   Below is a example of GridView constructor   import  package flutter material dart    void main     gt  runApp    MaterialApp      home  ExampleGrid             class ExampleGrid extends StatelessWidget     List lt String gt  images          https   uae microless com cdn no image jpg        https   images-na ssl-images-amazon com images I 81aF3Ob-2KL  UX679  jpg        https   www boostmobile com content dam boostmobile en products phones apple iphone-7 silver device-front png transform pdpCarousel image jpg        https   encrypted-tbn0 gstatic com images q tbn ANd9GcSgUgs8 kmuhScsx-J01d8fA1mhlCR5-1jyvMYxqCB8h3LCqcgl9Q        https   ae01 alicdn com kf HTB11tA5aiAKL1JjSZFoq6ygCFXaw Unlocked-Samsung-GALAXY-S2-I9100-Mobile-Phone-Android-Wi-Fi-GPS-8-0MP-camera-Core-4 jpg 640x640 jpg        https   media ed edmunds-media com gmc sierra-3500hd 2018 td 2018 gmc sierra-3500hd f34 td 411183 1600 jpg        https   hips hearstapps com amv-prod-cad-assets s3 amazonaws com images 16q1 665019 2016-chevrolet-silverado-2500hd-high-country-diesel-test-review-car-and-driver-photo-665520-s-original jpg        https   www galeanasvandykedodge net assets stock ColorMatched 01 White 640 cc 2018DOV170002 01 640 cc 2018DOV170002 01 640 PSC jpg        https   media onthemarket com properties 6191869 797156548 composite jpg        https   media onthemarket com properties 6191840 797152761 composite jpg           override   Widget build BuildContext context        return Scaffold        body  GridView          physics  BouncingScrollPhysics       if you want IOS bouncing effect  otherwise remove this line         gridDelegate  SliverGridDelegateWithFixedCrossAxisCount crossAxisCount  2    change the number as you want         children  images map  url              return Card child  Image network url               toList                            If you want your GridView items to be dynamic according to the content  you can few lines to do that but the simplest way to use StaggeredGridView package  I have provided an answer with example here   Below is an example for a GridView count   import  package flutter material dart    void main     gt  runApp        MaterialApp          home  ExampleGrid                     class ExampleGrid extends StatelessWidget      override   Widget build BuildContext context        return Scaffold        body  GridView count          crossAxisCount  4          children  List generate 40   index              return Card              child  Image network  https   robohash org  index                   robohash org api provide you different images for any number you are giving                                     Screenshot for above snippet     Example for a SliverGridView   import  package flutter material dart    void main     gt  runApp        MaterialApp          home  ExampleGrid                     class ExampleGrid extends StatelessWidget      override   Widget build BuildContext context        return Scaffold        body  CustomScrollView          primary  false          slivers   lt Widget gt             SliverPadding              padding  const EdgeInsets all 20 0               sliver  SliverGrid count                crossAxisSpacing  10 0                crossAxisCount  2                children  List generate 20   index                    return Card child  Image network  https   robohash org  index

User · Answer

GridView is used for implementing material grid lists  If you know you have a fixed number of items and it s not very many  16 is fine   you can use GridView count  However  you should note that a GridView is scrollable  and if that isn t what you want  you may be better off with just rows and columns     import  dart collection   import  package flutter scheduler dart   import  package flutter material dart   import  dart convert    import  package flutter material dart   import  package flutter services dart   import  package flutter foundation dart    void main       runApp new MyApp        class MyApp extends StatelessWidget      override   Widget build BuildContext context        return new MaterialApp        title   Flutter Demo         theme  new ThemeData          primarySwatch  Colors orange                 home  new MyHomePage                  class MyHomePage extends StatelessWidget     override   Widget build BuildContext context       return new Scaffold        appBar  new AppBar          title  new Text  Grid Demo                   body  new GridView count          crossAxisCount  4          children  new List lt Widget gt  generate 16   index              return new GridTile              child  new Card                color  Colors blue shade200                child  new Center                  child  new Text  tile  index

User · Answer

A simple example loading images into the tiles  import  package flutter material dart    void main       runApp  MyApp        class MyApp extends StatelessWidget      override   Widget build BuildContext context        return Container         color  Colors white30        child  GridView count            crossAxisCount  4            childAspectRatio  1 0            padding  const EdgeInsets all 4 0             mainAxisSpacing  4 0            crossAxisSpacing  4 0            children   lt String gt                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png                http   www for-example org img main forexamplelogo png               map  String url                return GridTile                  child  Image network url  fit  BoxFit cover                 toList                   The Flutter Gallery app contains a real world example  which can be found here

User · Answer

Use whichever suits your need      GridView count       GridView count    crossAxisCount  2    children   lt Widget gt       FlutterLogo        FlutterLogo        FlutterLogo        FlutterLogo            GridView builder       GridView builder    gridDelegate  SliverGridDelegateWithFixedCrossAxisCount crossAxisCount  2     itemBuilder      index    gt  FlutterLogo      itemCount  4     GridView       GridView    gridDelegate  SliverGridDelegateWithFixedCrossAxisCount crossAxisCount  2     children   lt Widget gt       FlutterLogo        FlutterLogo        FlutterLogo        FlutterLogo            GridView custom       GridView custom    gridDelegate  SliverGridDelegateWithFixedCrossAxisCount crossAxisCount  2     childrenDelegate  SliverChildListDelegate              FlutterLogo          FlutterLogo          FlutterLogo          FlutterLogo                   GridView extent       GridView extent    maxCrossAxisExtent  400    children   lt Widget gt       FlutterLogo        FlutterLogo        FlutterLogo        FlutterLogo              Output  same for all

[flutter] Flutter - Layout a Grid

Examples related to flutter

Examples related to dart

Examples related to flutter-layout