Flutter, ListView and GridView

3 min readMay 9, 2018

main.dart

packages

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'

Flutter widgets implementing Material Design.

Flutter widgets implementing the current iOS design.

main function and StatelessWidget

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  new MaterialApp(
      title: 'Flutter TabBar',
      home: new Home(),
      theme: new ThemeData(primaryColor: Colors.black),
    );
  }
}

StatefulWidget

content and source code

Ticker Provider State Mix in

class _HomeState extends State<Home> with TickerProviderStateMixin{}

Provides Ticker objects that are configured to only tick while the current tree is enabled, as defined by TickerMode.

To create an AnimationController in a class that uses this mixin, pass `vsync: this` to the animation controller constructor whenever you create a new animation controller.

Default Tab Controller

return new DefaultTabController();

DefaultTabController is an inherited widget that is used to share a TabController with a TabBar or a TabBarView. It’s used when sharing an explicitly created TabController isn’t convenient because the tab bar widgets are created by a stateless parent widget or by different parent widgets.

The length argument is typically greater than one. The initial Index argument must not be null.

Tab Controller

TabController tabController = new TabController(length: 2, vsync: this);

Coordinates tab selection between a TabBar and a TabBarView. The index property is the index of the selected tab and the animation represents the current scroll positions of the tab bar and the tar bar view. The selected tab’s index can be changed with animateTo.

A stateful widget that builds a TabBar or a TabBarView can create a TabController and share it directly.

When the TabBar and TabBarView don’t have a convenient stateful ancestor, a TabController can be shared by providing a DefaultTabController inherited widget.

Tab Bar

new TabBar(tabs:[tabItem])

Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView. If a TabController is not provided, then a DefaultTabController ancestor must be provided instead. The tab controller’s TabController.length must equal the length of the tabs list.

Tab Bar View

new TabBarView(
  controller: tabController,
  children: [
    item1, 
    item2  
  ],
),

A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar. Creates a page view with one child per tab. The length of children must be the same as the controller’s length.

ListView.builder

new ListView.builder(
  itemCount: no.of.items,
  itemBuilder: (BuildContext context, int index) {});

This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible. Providing a non-null `itemCount` improves the ability of the ListView to estimate the maximum scroll extent.

The `itemBuilder` callback will be called only with indices greater than or equal to zero and less than `itemCount`.

The `itemBuilder` should actually create the widget instances when called. Avoid using a builder that returns a previously-constructed widget; if the list view’s children are created in advance, or all at once when the ListView itself is created, it is more efficient to use [new ListView]. Even more efficient, however, is to create the instances on demand using this constructor’s `itemBuilder` callback.

GridView.builder

new GridView.builder(
    itemCount: no.of.items,
    gridDelegate:
      new SliverGridDelegateWithFixedCrossAxisCount(
                                   crossAxisCount: GridViewRow),
    itemBuilder: (BuildContext context, int index) {})

This constructor is appropriate for grid views with a large (or infinite) number of children because the builder is called only for those children that are actually visible. Providing a non-null `itemCount` improves the ability of the GridView to estimate the maximum scroll extent.

`itemBuilder` will be called only with indices greater than or equal to zero and less than `itemCount`. The gridDelegate argument must not be null.

Full source code

https://github.com/vignesh7501/Flutter-ListView-and-GridView.git