skip to Main Content

My goal is to populate a gridview where each grid item consists of two row items.

Here is what I am trying to reach (photo made through photoshop):

enter image description here

But what I am getting is this:

enter image description here

The code is returning an error: ‘Incorrect Use of ParentDataWidget’

Code:

return Scaffold(
      body: Column(children: [
        Card(
          color: Theme.of(context).primaryColor,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                margin: EdgeInsets.only(left: 16, top: paddingSize, bottom: 16),
                child: Icon(
                  Icons.wb_sunny,
                  size: 50,
                  color: color,
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 16, top: paddingSize, bottom: 16),
                child: Text(
                  "73°F",
                  style: TextStyle(
                    fontSize: 50,
                    fontWeight: FontWeight.w400,
                    color: color,
                  ),
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  width: 100,
                  height: 40,
                  margin:
                      EdgeInsets.only(left: 8, top: paddingSize, bottom: 16),
                  alignment: FractionalOffset.bottomLeft,
                  child: Text(
                    "Outside",
                    style: TextStyle(
                      fontSize: 17,
                      fontWeight: FontWeight.w400,
                      color: color,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Flexible(
          child: GridView.count(
            scrollDirection: Axis.vertical,
            // shrinkWrap: true,
            primary: false,
            padding: EdgeInsets.all(10),
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            crossAxisCount: 2,
            children: generateIgluGridView(), <===== HERE IS WHERE GRIDVIEW EXECUTES
          ),
        ),
      ]),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex:
            selectedIndex, // this will be set when a new tab is tapped
        onTap: onItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.chair),
            label: 'Mail',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.add_circle,
              size: 50,
              color: Colors.blue,
            ),
            label: '',
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.app_settings_alt), label: 'Contacts'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Contacts')
        ],
      ),
    );

generateIgluGridView() {
    return List.generate(4, (index) {
        return Container(
            padding: const EdgeInsets.all(20),
            color: Theme.of(context).primaryColor,
            child: Expanded(
              child: Row(
                children: [
                  Text("HEY"),
                  Text("Ho"),
                ],
              ),
            ));
      });
}

It would also be nice if the text would expand using a Fittedbox to the size of the grid container.

2

Answers


  1. Use Column instead of a Row widget, your grid item code should look like this

    generateIgluGridView() {
        return List.generate(4, (index) {
          return Container(
              padding: const EdgeInsets.all(20),
              color: Theme.of(context).primaryColor,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("HEY"),
                  Text("Ho"),
                ],
              ));
        });
      }
    

    enter image description here

    Login or Signup to reply.
  2. Wrap your GridView.count in an Expanded() rather than a Flexible()

    In your generateIgluGridView() fn replace Expanded() with a FittedBox(fit: BoxFit.contain)

    Replace the Row containing your Text "HEY" and "HO" with a Column

    Here’s the code below

    return Scaffold(
          body: Column(children: [
            Card(
              color: Theme.of(context).primaryColor,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    margin: EdgeInsets.only(left: 16, top: 10, bottom: 16),
                    child: Icon(
                      Icons.wb_sunny,
                      size: 50,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 16, top: 10, bottom: 16),
                    child: Text(
                      "73°F",
                      style: TextStyle(
                        fontSize: 50,
                        fontWeight: FontWeight.w400,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      width: 100,
                      height: 40,
                      margin: EdgeInsets.only(left: 8, top: 10, bottom: 16),
                      alignment: FractionalOffset.bottomLeft,
                      child: Text(
                        "Outside",
                        style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.w400,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: GridView.count(
                scrollDirection: Axis.vertical,
                // shrinkWrap: true,
                primary: false,
                padding: EdgeInsets.all(10),
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                crossAxisCount: 2,
                children: generateIgluGridView(),
              ),
            ),
          ]),
        );
      }
    
      generateIgluGridView() {
        return List.generate(4, (index) {
          return Container(
              padding: const EdgeInsets.all(20),
              color: Theme.of(context).primaryColor,
              child: FittedBox(
                fit: BoxFit.contain,
                child: Row(
                  children: [
                    Text("HEY"),
                    Text("Ho"),
                  ],
                ),
              ));
        });
      }
    }
    
    

    See image

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search