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

Place Flutter Widget in second Column if the first has no more space

I have a Layout with 2 Columns (see image). Now i have a List<Widget> and i want to place theses Widgets (e.g. Text Widgets) in the two Columns. First i want to fill Column 1 and when there is no more space for another Text Widget in this Column, I want to start filling Column 2. How can i do this?

example

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a Solution with a ListView Builder. But Wrap or maybe the LayoutBuilder from the comments above would certainly also work.

    ListView.builder(
    itemCount: widgetList.length % 2 == 0
        ? widgetList.length ~/ 2
        : widgetList.length ~/ 2 + 1,
    itemBuilder: (context, index) {
      return Padding(
        padding: betweenRowsPadding,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              flex: 1,
              child: TextIconRow(
                icon: widgetList[index * 2].icon,
                text: widgetList[index * 2].text,
                iconLeft: true,
              ),
            ),
            Expanded(
              flex: 1,
              child: (index * 2 + 1 < widgetList.length)
                  ? TextIconRow(
                      icon: widgetList[index * 2 + 1].icon,
                      text: widgetList[index * 2 + 1].text,
                      mainAxisAlignment: MainAxisAlignment.end,
                    )
                  : Container(),
            ),
          ],
        ),
      );
    },
  ),

  2. 0

    The LayoutBuilder widget is used to determine the available height within the parent Column. If the available height is greater than the initial height of the first

              Column(
        children: [
          // First Column
          Container(
            color: Colors. blue,
            height: 300, // Initial height of the first column
            child: Column(
              children: [
                // Widgets in the first column
                // ...
              ],
            ),
          ),
          // Second Column (conditionally displayed)
          LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              if (constraints.maxHeight > 300) {
                // Display widgets in the second column
                return Container(
                  color: Colors. red,
                  child: Column(
                    children: [
                      // Widgets in the second column
                      // ...
                    ],
                  ),
                );
              } else {
                return Container(); // Empty container if the second column is not needed
              }
            },
          ),
        ],
      ),
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search