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

Full width button inside card inside row which is inside column in flutter

Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            color: Colors.black,
            width: double.infinity,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: awards
                  .map((award) => Card(
                        elevation: 3,
                        surfaceTintColor: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 8, vertical: 16.0),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            // crossAxisAlignment: CrossAxisAlignment.stretch, <--- Why this guy is breaking ? logic ? 
                            children: [
                              SizedBox(
                                // width: double.maxFinite, <--- So does this guy :(
                                child: OutlinedButton(
                                    onPressed: () {}, child: const Text("Hello")),
                              )
                            ],
                          ),
                        ),
                      ))
                  .toList(),
            ),
          ),
        ],
      ));

I am trying to spread the button width across card inside row, but nothing is working.
I don’t even understand why it is breaking, it is saying it is breaking in the boxconstraints as it has infinite width

Tags:

2

Answers


  1. 0

    You can use the LayoutBuilder to get the max width that can use for every card

    Login or Signup to reply.
  2. 0

    Here you go. I believe this is what you want. It is the minimum viable code, under 50 lines. I hope it works. Feel free to provide acknowledgement in the comment below.

        Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          color: Colors.black,
          width: double.infinity,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <String>[
              "A 1",
              "A 2",
              "A 3",
              "A 4",
              "A 5",
            ].map(
              (String award) {
                return Expanded(
                  child: Card(
                    elevation: 3,
                    surfaceTintColor: Colors.white,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 8,
                        vertical: 16.0,
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          SizedBox(
                            child: OutlinedButton(
                              onPressed: () {},
                              child: Text(award),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                );
              },
            ).toList(),
          ),
        ),
      ],
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search