Question 75920 in Flutter Question posted in
The official Flutter documentation can be found here.

GridView builder in flutter from list of array

 Padding(
              padding: EdgeInsets.all(10),
              child: InkWell(
                onTap: (){},
                child: Container(
                  width: 130,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: MyTheme.creamColor,
                  ),
                  child: Center(
                    child: Column(
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: 15),
                          child: Image(image: AssetImage("assets/images/icons.png"))
                        ),
                      // SizedBox(height: 7,),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("Neurology"),
                        )
                      ],
                    ),
                  )
                ),
              ),
            )

List of Names List<String>name = ["Neurogy","Dentist","Eye","Ear"];

Images in folder with name

cat1.png, cat2.png, cat3.png, cat4.png

enter image description here This is the output which I’m Expecting

Name length is not only 4 and same for image its total 24,
Complete code: https://github.com/reyaz-mra/flutter-firebase/blob/main/category.dart
How can i make it using Gridview builder in flutter??

Tags:

2

Answers


  1. 0

    It seems like category name and asset path are the only two things that are changing. I’d recommend creating two lists:

    • List<String> categories
    • List<String> assetPaths

    and using them in GridView like this:

    GridView.count(
        crossAxisCount: 2, // decides number of columns
        shrinkWrap: true, // clear space issue
        padding: const EdgeInsets.all(10),
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        children: List.generate(categories.length, (index){
          return InkWell(
                onTap: (){},
                child: Container(
                  width: 130,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: MyTheme.creamColor,
                  ),
                  child: Center(
                    child: Column(
                      children: [
                        Container(
                          margin: const EdgeInsets.only(top: 15),
                          child: Image(image: AssetImage(assetPaths[index]))
                        ),
                      // SizedBox(height: 7,),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(categories[index]),
                        )
                      ],
                    ),
                  )
                ),
              );
        }),
      ),
    );
    Login or Signup to reply.
  2. 0

    you can achieve it with List.generate(length, (index)=> ) or using name.map( (element) => )

    here how your code will look like

    
               Column(
                      children: List.generate(name.length, (index) => Column(children:Container(
                          margin: EdgeInsets.only(top: 15),
                          child: Image(image: AssetImage("assets/images/icons.png"))
                        ),
                      // SizedBox(height: 7,),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(name[index),
                        ) ))




                    ),

    or you can achieve it like this with List.map which is not recommended as it costs performance

               Column(
                  children: name.map((element)=> Column(children:Container(
                      margin: EdgeInsets.only(top: 15),
                      child: Image(image: AssetImage("assets/images/icons.png"))
                    ),
                  // SizedBox(height: 7,),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(element,
                    ) ))
                ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search