Flutter Card Layout

Question

So I'm new to flutter, and I'm trying to make a card. But I can't seem to get my desired output.

I tried to separate the different widgets, by using rows and columns, but I kept messing it up.

This is my target output Target output This is my current progressCurrent progress

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: buildhomePageAppBar(),
  body: buildExhibitorBody(),
);
}

Widget buildExhibitorBody() {
return Container(
  child: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        buildExhibitorText(),
        SizedBox(
          height: 10,
        ),
        buildExhibitorCards(),
        SizedBox(height: 10),
      ],
    ),
  ),
 );
 }

Widget buildhomePageAppBar() {
double profileDimension = 35;
return AppBar(
  backgroundColor: Colors.white,
  titleSpacing: 0,
  title: Padding(
    padding: EdgeInsets.only(
      left: 20,
    ),
    child: Row(
      children: [
        Padding(
          padding: EdgeInsets.only(
            top: 5,
            bottom: 5,
          ),
          child: Image(
            image: AssetImage('assets/images/plain_logo.png'),
            height: 30,
          ),
        ),
        SizedBox(width: 5),
        Text(
          'Virtex',
          style: TextStyle(
            color: Colors.black87,
            fontFamily: 'Poppins',
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        )
      ],
    ),
  ),
  actions: [
    Padding(
      padding: EdgeInsets.only(
        top: 10,
        bottom: 10,
      ),
      child: Container(
        height: profileDimension,
        width: profileDimension,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
            color: Colors.black54,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(50),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(50),
          child: Image(
            width: profileDimension,
            height: profileDimension,
            image: AssetImage(
              'assets/images/profile-image.jpeg',
            ),
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
    SizedBox(width: 20),
  ],
);
}

Widget buildExhibitorText() {
return Padding(
  padding: EdgeInsets.only(
    left: 20,
    right: 20,
    top: 20,
    bottom: 10,
  ),
  child: Container(
    child: new Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Text(
            "Exhibitors",
            textAlign: TextAlign.justify,
            style: TextStyle(
              fontFamily: "DMSans",
              letterSpacing: -0.2,
              fontSize: 20.0,
              color: Colors.black,
              fontWeight: FontWeight.w400,
            ),
          ),
        ),
      ],
    ),
  ),
 );
 }

 Widget buildExhibitorCards() { // I think my problem is I don't know how to do the layout here
return Container(
  width: 400,
  height: 150,
  child: Column(children: <Widget>[
    Card(
      elevation: 1,
      child: Padding(
          padding: const EdgeInsets.only(),
          child: Row(children: [
            buildCardImage(),
            buildCardExhibitor(),
            buildCardIndustry(),
            buildCardGo(),
          ])),
    ),
  ]),
 );
 }

 Widget buildCardExhibitor() {
 return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
  Container(
    padding: EdgeInsets.all(10),
    width: 40,
    height: 40,
    child: Center(
      child: Row(
        children: <Widget>[
          Text(
            "EN",
            style: TextStyle(
              fontSize: 15.0,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
          Text('Exhibitor Name')
        ],
      ),
    ),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(
        Radius.circular(200),
      ),
      color: Colors.red,
    ),
  ),
]);
}

Widget buildCardImage() {
return Container(
  height: 100,
  width: 100,
  child: Image(
    image: AssetImage('assets/images/onboarding-2.jpg'),
    height: 100,
  ),
);
}

 Widget buildCardIndustry() {
return Padding(
  padding: EdgeInsets.only(
    left: 40,
    right: 40,
  ),
  child: Container(
    child: new Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Text(
          "Industry 1",
          style: TextStyle(
            fontFamily: "DMSans",
            color: Colors.grey,
            letterSpacing: 0.3,
            fontSize: 12,
          ),
        ),
        Text(
          "Industry 2",
          style: TextStyle(
            fontFamily: "DMSans",
            letterSpacing: -0.3,
            fontSize: 12,
            color: Colors.grey,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    ),
  ),
  );
  }

  Widget buildCardGo() {
 return Row(mainAxisAlignment: MainAxisAlignment.end, children: [
  Text(
    'Go to Booth',
    style: TextStyle(
      color: Colors.blue,
      fontFamily: 'Poppins',
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
  ),
  SizedBox(width: 5),
  IconButton(
    icon: Icon(
      MdiIcons.fromString('arrow-right'),
      size: 30,
      color: Colors.black,
    ),
    onPressed: () {
      Navigator.of(context).pop();
    },
  ),
]);
}
}

I would greatly appreciate any kind of help.

Answer 1

Look:

My own Code

import 'package:flutter/material.dart';

class CardLayout extends StatelessWidget {
  Widget buildCardImage = Container(
    margin: EdgeInsets.only(right: 10.0),
    width: 150,
    height: 150,
    decoration: BoxDecoration(
      image: DecorationImage(
        fit: BoxFit.fill,
        image: NetworkImage("https://picsum.photos/250?image=9"),
      ),
    ),
  );

  Widget buildCardExhibitor =
      Row(mainAxisAlignment: MainAxisAlignment.start, children: [
    Container(
      padding: EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(200),
        ),
        color: Colors.red,
      ),
      child: Text(
        "EN",
        style: TextStyle(
          fontSize: 15.0,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        textAlign: TextAlign.center,
      ),
    ),
    SizedBox(
      width: 10.0,
    ),
    Text(
      'Exhibitor Name',
      style: TextStyle(
        fontSize: 15.0,
        color: Colors.black,
        fontWeight: FontWeight.bold,
      ),
      textAlign: TextAlign.center,
    ),
  ]);

  Widget buildCardIndustry = Padding(
    padding: EdgeInsets.all(8.0),
    child: Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            padding:
                EdgeInsets.only(left: 10.0, right: 10.0, top: 5, bottom: 5),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(100),
              ),
              color: Colors.blueGrey.shade400,
            ),
            child: Text(
              'Industry 1',
              style: TextStyle(
                fontFamily: "DMSans",
                color: Colors.white,
                letterSpacing: 0.3,
                fontSize: 12,
              ),
            ),
          ),
          SizedBox(
            width: 10.0,
          ),
          Container(
            padding:
                EdgeInsets.only(left: 10.0, right: 10.0, top: 5, bottom: 5),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(100),
              ),
              color: Colors.blueGrey.shade400,
            ),
            child: Text(
              'Industry 2',
              style: TextStyle(
                fontFamily: "DMSans",
                color: Colors.white,
                letterSpacing: 0.3,
                fontSize: 12,
              ),
            ),
          ),
        ],
      ),
    ),
  );

  Widget buildCardGo = Row(mainAxisAlignment: MainAxisAlignment.end, children: [
    Text(
      'Go to Booth',
      style: TextStyle(
        color: Colors.blue,
        fontFamily: 'Poppins',
        fontSize: 16,
        fontWeight: FontWeight.bold,
      ),
    ),
    SizedBox(width: 3),
    IconButton(
      icon: Icon(
        Icons.arrow_forward_rounded,
        size: 30,
        color: Colors.blue,
      ),
      onPressed: () {
        //Navigator.pop(context);
      },
    ),
  ]);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      appBar: AppBar(
        title: Text('Exhibitor'),
        actions: [
          IconButton(
              icon: Icon(Icons.filter_list_rounded),
              onPressed: () {
                Navigator.pop(context);
              })
        ],
      ),
      body: Container(
        margin: EdgeInsets.only(top: 10.0),
        width: MediaQuery.of(context).size.width,
        //height: 150.0, // remove this line -------------- (1) [EDIT]
        child: Column(
          // wrap card with column and add listtile as children -------------- (2) [EDIT]
          children: [
            ListTile(
              leading: Text('Exhibitor'),
              trailing: IconButton(
                  icon: Icon(Icons.filter_list_rounded),
                  onPressed: () {
                    Navigator.pop(context);
                  }),
            ),
            Card(
              elevation: 5.0,
              color: Colors.white,
              child: Padding(
                padding: EdgeInsets.all(5.0),
                child: Row(
                  children: <Widget>[
                    buildCardImage,
                    Expanded(
                        child: Column(
                      children: <Widget>[
                        buildCardExhibitor,
                        buildCardIndustry,
                        buildCardGo
                      ],
                    ))
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ));
  }
}