GridView

Code

///2019.4.20 By GX
Widget _buildRechargeGridView() {
    List<Widget> list = [];
    for (int i = 0; i < (infoList == null ? 0 : this.infoList.length); i++) {
      /// Initialize each unit 
      Widget view = _buildGridUnit();
      list.add(view);
    }

    return Container(
        height: (MediaQuery.of(context).size.width) / 3 + 44,
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.only(
            left: getWidthFromRatio(context, 20),
            right: getWidthFromRatio(context, 20)),
        child: GridView(
            /// Model adaptation , If necessary , change SliverGridDelegateWithFixedCrossAxisCount
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: (MediaQuery.of(context).size.width) / 3,
            mainAxisSpacing: 22,
            crossAxisSpacing: 20,
            childAspectRatio: 2,
          ),
          children: list,
        ),
      );
  }

Code instructions

infoList

infoList It's right GridView Initialization information of each unit List. In your code, it should be obtained from the network or other ways .

_buildGridUnit()

_buildGridUnit yes return One widget Private functions of , Create... In the function as required GridView General cell layout

Attribute specification

SliverGridDelegateWithMaxCrossAxisExtent

const SliverGridDelegateWithMaxCrossAxisExtent({
    @required this.maxCrossAxisExtent, // Every Unit How wide 
    this.mainAxisSpacing = 0.0,// Spindle direction spacing 
    this.crossAxisSpacing = 0.0,// Longitudinal axis spacing 
    this.childAspectRatio = 1.0,// Spindle vertical axis scaling 
    })

SliverGridDelegateWithFixedCrossAxisCount

const SliverGridDelegateWithFixedCrossAxisCount({
    @required this.crossAxisCount,// How many per line 
    this.mainAxisSpacing = 0.0,// Spindle direction spacing 
    this.crossAxisSpacing = 0.0,// Longitudinal axis spacing 
    this.childAspectRatio = 1.0,// Spindle vertical axis scaling 
    })

Small pit

GridView Make it out , There will be sliding effects , according to UI Schematic diagram and product requirements , You may need to add a container to release sliding

appreciate

If it helps you , Stand by me , Thank you for