Flutter for beginner

Mở Đầu

Trong bài viết ngày hôm nay mình sẽ giới thiệu tới các bạn cách sử dụng Row widget trong Flutter. Một trong những widget thường được sử dụng để căn chỉnh vị trí các widget bên trong của nó theo chiều ngang

Làm quen với Row

MainAxisAlignment

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body:  Card(
          color: Colors.yellow,
          margin: EdgeInsets.all(0.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Icon(Icons.star, size: 50.0,color: Colors.green),
              Icon(Icons.star, size: 50.0,color: Colors.green),
              Icon(Icons.star, size: 50.0,color: Colors.green),
              Icon(Icons.star, size: 50.0,color: Colors.green),
            ],
          ),
        ),
      );
  • MainAxisAlignment.start

Làm quen với Row: Flutter for beginer

  • MainAxisAlignment.end

Làm quen với Row: Flutter for beginer

  • MainAxisAlignment.center

Làm quen với Row: Flutter for beginer

  • MainAxisAlignment.spaceAround

Làm quen với Row: Flutter for beginer

  • MainAxisAlignment.spaceBetween

Làm quen với Row: Flutter for beginer

  • MainAxisAlignment.spaceEvenly

CrossAxisAlignment

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body:  Card(
      color: Colors.yellow,
      margin: EdgeInsets.all(0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Icon(Icons.star, size: 50.0,color: Colors.green),
          Icon(Icons.star, size: 200.0,color: Colors.green),
          Icon(Icons.star, size: 50.0,color: Colors.green),
          Icon(Icons.star, size: 50.0,color: Colors.green),
        ],
      ),
    ),
  );
}
  • CrossAxisAlignment.start

  • CrossAxisAlignment.center

  • CrossAxisAlignment.end

  • CrossAxisAlignment.stretch

Bạn để ý rằng khi dùng với stretch thì vùng màu vàng là vùng chiếm giữ của Row sẽ là toàn bộ cái không gian còn lại. Ở đây là toàn bộ màn hình

  • CrossAxisAlignment.baseline

Đối với baseline thì thường sử dụng cho việc căn lề text với các size khác nhau

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body:  Card(
      color: Colors.yellow,
      margin: EdgeInsets.all(0.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: <Widget>[
          Text(
            'Baseline',
            style: Theme.of(context).textTheme.display3,
          ),
          Text(
            'Baseline',
            style: Theme.of(context).textTheme.body1,
          ),
        ],
      ),
    ),
  );
}

 

MainAxisSize

  • MainAxisSize.max

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body:  Card(
      color: Colors.yellow,
      margin: EdgeInsets.all(0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Icon(Icons.star, size: 50.0,color: Colors.green),
          Icon(Icons.star, size: 50.0,color: Colors.green),
          Icon(Icons.star, size: 50.0,color: Colors.green),
          Icon(Icons.star, size: 50.0,color: Colors.green),
        ],
      ),
    ),
  );
}
  • MainAxisSize.min

Kết bài

Như vậy sau bài viết làm quen với Row này. Các bạn đã biết cách sử dụng Row như thế nào và khi nào thì cần đến nó rồi nhỉ :D.

Nếu có bất cứ vấn đề gì thắc mắc các bạn có thể comment bên dưới bài viết, mình sẽ phản hồi sớm nhất cho thể. Down source code tại đây

LEAVE A REPLY

Please enter your comment!
Please enter your name here