Issues getting text laid out correctly using Rows and Columns

I'm still familiarizing myself with Flutter's layout tools and I'm trying to get some Text aligned correctly with some title text above it. I'm having some issues getting it where I want it though. If anyone has any advice I'd be forever grateful!

This is what I currently have. I have everything how I like it except for the amount text. I want them all lined up under the Amount title. Except I cant get them line up for the life of me. They are all messed up due to the text before it having different lengths.

This is the code for how I am currently rendering everything. The amount text is the bottom Row.

    return Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(95.0),
          child: AppBar(
            automaticallyImplyLeading: false, // hides leading widget
            flexibleSpace: TransactionsAppBar(),
          ),
        ),
        body: FutureBuilder<List<Transaction>>(
            future: _future,
            builder: (context, AsyncSnapshot<List<Transaction>> snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return Text('none');
                case ConnectionState.waiting:
                  return Center(child: CircularProgressIndicator());
                case ConnectionState.active:
                  return Text('');
                case ConnectionState.done:
                  if (snapshot.hasError) {
                    print(
                      'SNAPSHOT ERROR HERE${snapshot.error}',
                    );
                  }
              }
              List transaction = snapshot.data;
              print(transaction);
              return ListView.builder(
                itemCount: transaction.length,
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return Padding(
                    padding:
                        EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
                    child: Card(
                      color: (index % 2 == 0) ? greycolor : Colors.white,
                      child: Container(
                          height: 60,
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                          child: Row(
                            children: <Widget>[
                              Column(
                                children: [
                                  Container(
                                    margin: EdgeInsets.only(left: 5, top: 13),
                                    child: Text(transaction[index].date,
                                        style: TextStyle(
                                            fontSize: 15, color: Colors.black),
                                        textAlign: TextAlign.left),
                                  ),
                                ],
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Padding(
                                      padding: EdgeInsets.only(top: 13, left: 8),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: [
                                          Text(transaction[index].title,
                                              style: TextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                  fontFamily: 'Montserrat'),
                                              textAlign: TextAlign.center)
                                        ],
                                      )),
                                  Padding(
                                    padding: EdgeInsets.only(left: 8,right: 39),
                                    child: Row(
                                      children: [
                                        Text(
                                          '${transaction[index].description}',
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontStyle: FontStyle.italic),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: [
                                  Padding(
                                    padding:
                                        EdgeInsets.only(left: 20, top: 13),
                                    child: Container(
                                      child: Text(
                                          '\$${transaction[index].amount}',
                                          style: TextStyle(
                                              fontSize: 16,
                                              color: Colors.black),
                                          textAlign: TextAlign.right),
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          )),
                    ),
                  );
                },
              );
            }));

2 answers

  • answered 2020-10-29 22:16 ikerfah

    Wrap each child of the root Row by Expanded widget this will allows the children to split the width equally ( You can change flex parameter for Expanded widget to get more space , i.e: 3 children with flex:1 will give them 1/3 each of the width, two children with flex:1 and one with flex:2 with be divided 1/4 1/4 2/4 ..ect).
    So in your case you can give date and amount flex:1 and item flex:2

    itemBuilder: (context, index) {
                      return Padding(
                        padding:
                            EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
                        child: Card(
                          color: (index % 2 == 0) ? greycolor : Colors.white,
                          child: Container(
                              height: 60,
                              padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                              child: Row(
                                children: <Widget>[
                                  Expanded(child:Column(
                                    children: [
                                      Container(
                                        margin: EdgeInsets.only(left: 5, top: 13),
                                        child: Text(transaction[index].date,
                                            style: TextStyle(
                                                fontSize: 15, color: Colors.black),
                                            textAlign: TextAlign.left),
                                      ),
                                    ],
                                  ),),
    ...
    

  • answered 2020-10-29 22:17 Omar F AlQataberi

    you can wrap the second column with Expanded Widget