top of page

[Flutter/Dart] Place widgets in the middle and right edge of the screen


What want to do

As the title suggests.

  • Place two widgets in one line on the screen

  • One in the center of the screen and the other on the right edge of the screen

When I tried to do it with Row's mainAxisAligment, it was a bit difficult.



Solution

Do as below

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Expanded(       
      child: SizedBox(),     
    ),
    WidgetA(),
    Expanded(
      child: Align(
        alignment: Alignment.centerRight,
        child: WidgetB(),
       ), 
    ), 
  ]
),

The point is

  • Insert SizedBox() to force the number of elements to 3

  • Enclose SizedBox with Expanded

  • Row's mainAxisAligment is MainAxisAlignment.spaceBetween Now WidgetA is in the middle and WidgetB is on the right edge

  • Additionally surround WidgetB with Align to make it truly right edge


Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page