Home > database >  flutter add widgets top and bottom to list GridView.builder
flutter add widgets top and bottom to list GridView.builder

Time:08-31

Tell me how to add widgets to the top and bottom of this list using GridView.builder? I've tried using Column as well, but it doesn't work the way I wanted. What other options are there?

Widget build(BuildContext context) 
{ 
  return Padding( 
    padding: const EdgeInsets.symmetric(horizontal: 12.0), 
    child: Stack( 
      children: [ 
        LayoutBuilder(
          builder: (context, constraints) { 
            return GridView.builder(...); 
          } 
        ), 
        Padding(child: TextField(...)) 
      ], 
    ), 
  ); 
} 

CodePudding user response:

Try below code:

 SingleChildScrollView(
      padding: const EdgeInsets.all(10),
      child: Column(
        children: [
          Container(
            width: double.infinity,
            height: 50,
            color: Colors.blue,
            child: const Text(
              'Your Apper Widget',
              textAlign: TextAlign.center,
            ),
          ),
          GridView.builder(
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: 9,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3),
            itemBuilder: (context, index) {
              return const Card(
                child: ListTile(
                  title: Text('userList'),
                ),
              );
            },
          ),
          Container(
            width: double.infinity,
            height: 50,
            color: Colors.red,
            child: const Text(
              'Your Lower Widget',
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    ),

CodePudding user response:

Try this code :

body: Column(
    mainAxisSize: MainAxisSize.max,
    children: [
      Container(
        color: Colors.red,
        height: 48.0,
      ),
      Expanded(
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2),
          itemBuilder: (_, index) => const FlutterLogo(),
          itemCount: 20,
        ),
      ),
      Container(
        color: Colors.green,
        height: 48.0,
      )
    ],
  ),
  • Related