CODEWITHSUNDEEP
flutter
hothand
hothand

Reputation: 213

Flutter row mainAxisAlignment spaceBetween not working

This is my code to build the item view container:

Widget buildItemView(InboxItem t) {

return GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () => print("ontap")),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Padding(padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                  icon ...
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[

                  /// title
                  _buildTitle(t),

                  ...
                ],
              )
            ],
          )),
      Divider(height: 3.0)
    ],
  ),
);
}

and _buildTitle code, here is where the problem occurs:

Widget _buildTitle(InboxItem item) {
return Container(
  padding: EdgeInsets.only(bottom: 2.0),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[

      /// sender
      Text(item.sender == null ? "" : item.sender, style: ltBlackLargeText),

      /// time
      Text(item.receiveTime == null ? "" : item.receiveTime,
          style: dkGreySmallText),

    ],
  ),
);
}

Run result, time is immediately after the username instead of the right.

This is part of the screenshot:

Screenshot

Where is the problem?

Upvotes: 5

Views: 14363

Answers (4)

Ali Bayram
Ali Bayram

Reputation: 7931

You don't need to these three lines;

crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,

Just use Spacer() to push the next item to the end of empty space. Here is your final code;

Widget _buildTitle(InboxItem item) {
  return Container(
    padding: EdgeInsets.only(bottom: 2.0),
    child: Row(
      children: <Widget>[
        /// sender
        Text(item.sender == null ? "" : item.sender, style: ltBlackLargeText),
        Spacer(),

        /// time
        Text(item.receiveTime == null ? "" : item.receiveTime,
            style: dkGreySmallText),
      ],
    ),
  );
}

Upvotes: 0

AYESHA F.
AYESHA F.

Reputation: 1

See this image

Wrap your row in the SizedBox widget and set your desired width. Inside the column widget, the row is not getting enough width to apply mainAxisAlignment: MAinAxisAlignment.spaceBetween.

       Row(
          children: [
            // avatar image
            const CircleAvatar(
              backgroundColor: Colors.yellow,
              radius: 45,
            ),
            const SizedBox(width: 10),
            // for side details
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // for first row using spaceBetween
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.6,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: const [
                      Text('admin'),
                      Text('20-10-2020'),
                    ],
                  ),
                ),
                // other details
                const SizedBox(height: 10),
                const Text('123'),
                const SizedBox(height: 10),
                const Text('12312'),
              ],
            ),
          ],
        ),

Upvotes: 0

Brinda Rathod
Brinda Rathod

Reputation: 2903

Wrap Column Widget with Expanded inside Row as below,

Row(
    children: [
      Image.asset("assets/..."),
      Expanded(
        child: Column(children: [
          Row(
            children: [
              Text("admin"),
              Text("2020-12-14"),
            ],
          ),
        ]),
      ),
    ],
  )

Upvotes: 3

hothand
hothand

Reputation: 213

Because the superior does not fill the remaining space, change the item view code:

Widget buildItemView(InboxItem t) {

return GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () => print("ontap")),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Padding(padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                  icon ...
              ),
              Expanded(
                child:Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[

                    /// title
                    _buildTitle(t),

                    ...
                  ],
                ) ,
              )
            ],
          )),
      Divider(height: 3.0)
    ],
  ),
);
}

Upvotes: 15

Related Questions