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 Column 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ó

Làm quen với Column

MainAxisAlignment

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body:  Card(
          color: Colors.yellow,
          margin: EdgeInsets.all(0.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.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 Column: Flutter for beginer

  • MainAxisAlignment.end

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

  • MainAxisAlignment.center

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

  • MainAxisAlignment.spaceAround

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

  • MainAxisAlignment.spaceBetween

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

  • MainAxisAlignment.spaceEvenly

Làm quen với Column: Flutter for beginer
CrossAxisAlignment

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body:  Card(
          color: Colors.yellow,
          margin: EdgeInsets.all(0.0),
          child: Column(
            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 Column sẽ là toàn bộ cái không gian còn lại. Ở đây là toàn bộ màn hình

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: Column(
            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 Column này. Các bạn đã biết cách sử dụng Column 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