Làm sao để căn chỉnh 2 items bên trái và bên phải trong Flutter?

Tôi đang code phần AppBar và đang cần 2 items, một bên trái và một bên phải, cụ thể bên trái là một logo, và bên phải là một icon search.

Môi trường

dart, flutter

Giải pháp

Một cách đơn giản là hãy sử dụng Row với mainAxisAlignment: MainAxisAlignment.spaceBetween, cụ thể như sau:

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

Và với trường hợp như mô tả trên, bạn cần một logo bên trái, một search icon bên phải thì có thể tham khảo code sau:

appBar: AppBar(
          titleSpacing: 10,
          elevation: 0,
          title: new Image.asset('assets/images/logo.png', fit: BoxFit.cover, height: 40),
          backgroundColor: Colors.white,

          actions: [
            // action button
            IconButton(
              icon: Icon( Icons.search ),
              color: Colors.black,
              onPressed: () { },
            ),

          ],

        ),
Kết quả đạt được như sau:


Từ khóa

Flutter align two items on extremes - one on the left and one on the right

Không có nhận xét nào:

Đăng nhận xét