Search code examples
fluttercard

Flutter icon how to fill all the width and height available in the tab


i've a card like this. Actual card

but i want a card like this What i want

My code is:

return Card(
      semanticContainer: true,
      clipBehavior: Clip.antiAliasWithSaveLayer,
      margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
      elevation: 5.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      child: Container(
        padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('Example text'),
                Text("20-06-2021 - 13:00",
                    style:
                    TextStyle(fontSize: 15, fontStyle: FontStyle.italic)),
                Text("Example text"),
                Text("Example text"),
              ],
            ),
            Column(
              children: <Widget>[
                Flag(
                  'FR',
                  height: 40,
                  width: 40,
                  replacement: Text('Error'),
                ),
              ],
            ),
          ],
        ),
      ),
    );

Now, i have fixed height and width, i'm not able to obtain what i want because each attempt enlarge the card in height.
(I want to keep the same height as the card above).
The icons comes from the package flags (Flags package)


Solution

  • Instead of wrapping a Container in a Card. Try to Wrap a Row with Expanded in the Card. (I just changed the Container into padding)

            Card(
                semanticContainer: true,
                clipBehavior: Clip.antiAliasWithSaveLayer,
                margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
                elevation: 5.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15),
                ),
                child: Padding(
                  padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text('Example text'),
                            Text("20-06-2021 - 13:00",
                                style: TextStyle(
                                    fontSize: 15, fontStyle: FontStyle.italic)),
                            Text("Example text"),
                            Text("Example text"),
                          ],
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Container(
                          height: 100,
                          color: Colors.red,
                        ),
                      )
                    ],
                  ),
                ),
              ),
    
    

    above is your example. Below is the use of row with expanded