Photoshop Question posted in
The official user guide can be found here.

Flutter: Multiple Rows Inside Container – Photoshop

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.

Tags:

2

Answers


  1. 0

    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. 0

    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