Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

How to use the Flutter GridView.count, GridView.extent

July 20, 2020
in Flutter Widgets
3 min read
gridview widget flutter

GridView is for displaying a list of widgets when you want them to appear in rows and columns but don’t particularly care which rows and which columns – you just want them to show up in a grid.

Here’s another powerful widget from the Flutter team, as this, in general, can be called GridView widget class which has two constructors (GridView.count and GridView.extent).

RELATED FLUTTER RESOURCES

Understanding The Flutter ListView Widget

How To Build A Code Editor App In Flutter with code_editor Plugin

Flutter Form & FormField Widget – Implementation & Example

GridView widget

The GridView widget is another thing borrowed from HTML and the Web. GridView is for displaying a list of widgets when you want them to appear in rows and columns but don’t particularly care which rows and which columns – you just want them to
show up in a grid. To use a GridView, you’ll set its children property to the list of widgets you want to display and it will create the grid populating across and then wrapping to the next row, resizing its space available until it just fits. And here’s the greatest part, it automatically scrolls!
GridView has two constructors, GridView.extent() and GridView.count().

ADVERTISEMENT
  • What Is A FlushBar in Flutter? Display customized SnackBar

GridView.extent()

Extent refers to the maximum width of the child. GridView will only let its kids grow to that size. If they try to get bigger, it puts another element on that row and shrinks them all until they just fit across the entire width. Take a look at this example:

Widget build(BuildContext context) {
  return GridView.extent(
   maxCrossAxisExtent: 300.0,
          children:
           people.map<Widget>((dynamic person) =>
             PersonCard(person)).toList(),
     );
}

You’ll notice that in the images below, See how the containers resize to something less than 300. GridView decides that it can fit two across in portrait orientation. But when rotated, those two would have resized to something bigger than 300 so it puts three on each row.

GridView.extent() in Portrait
GridView.extent() in LandScape mode

GridView.count()

With the GridView.count() constructor, you specify how many columns you want regardless of orientation. GridView takes care of resizing its contents to fit. In the following example, we’ve told GridView.count() that we want two columns regardless of the orientation and the GridView sizes its children to fit exactly two across.

Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
children:
people.map<Widget>((dynamic person) =>
PersonCard(person)).toList(),
);
}
GridView.count() in portrait orientation
The same GridView.count() in landscape orientation

Now, You can see the difference? GridView.extent() is probably more useful because when the device is a portrait, maybe you’ll have two columns, but when it goes landscape, you can now fit three columns in and the contents can still fit.

RelatedFlutter Resource

fLUTTER ListView builder seperated
Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
flutter buttons, materialbutton, flatbutton, cupertinobutton, dismissible, iconbutton
Flutter Widgets

All Flutter Buttons – [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

July 27, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
Understanding the Flutter COntainer
Flutter Widgets

Container Widget & Box Model in Flutter – All You Need To Know

July 22, 2020
Next Post
flutter future async await

Flutter Future, Await, and Async - All You Need To Know

Understanding the Flutter COntainer

Container Widget & Box Model in Flutter - All You Need To Know

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

A Simple Flutter Sliding Switch – Like A Toggle Button

A Simple Flutter Sliding Switch – Like A Toggle Button

August 16, 2020
Flutter Native Text Input for iOS Apps – UITextView

Flutter Native Text Input for iOS Apps – UITextView

August 7, 2020
responsive scaffold flutter

How to use the Responsive Scaffold Package

June 25, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In