Flutter for beginner

Làm quen với IntrinsicWidth

Mở Đầu

Nếu bạn muốn tất cả các widget trong Row hoặc Column có cùng kích thước với widget có kích thước lớn nhất trong đó

Trong trường hợp như bên dưới

Làm quen với IntrinsicWidth và IntrinsicHeight: Flutter for beginer

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('IntrinsicWidth')),
        body: Center(
          child: Column(
            children: <Widget>[
              RaisedButton(
                onPressed: () {},
                child: Text('Short',style: TextStyle(color: Colors.white)),
                color: Colors.green,
              ),
              RaisedButton(
                onPressed: () {},
                child: Text('A bit Longer',style: TextStyle(color: Colors.white)),
                color: Colors.green,
              ),
              RaisedButton(
                onPressed: () {},
                child: Text('The Longest text button',style: TextStyle(color: Colors.white)),
                color: Colors.green,
              ),
            ],
          ),
        ),
      );
    }

 

Trong bài viết hôm nay mình sẽ hướng dẫn các bạn làm việc này

Để tất cả các button sẽ có cùng độ rộng với button có kích thước lớn nhất. Ở đây bạn có thể sử dụng IntrinsicWidth

Kết quả

Làm quen với IntrinsicWidth và IntrinsicHeight: Flutter for beginer

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('IntrinsicWidth')),
        body: Center(
          child: IntrinsicWidth(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                RaisedButton(
                  onPressed: () {},
                  child: Text('Short',style: TextStyle(color: Colors.white)),
                  color: Colors.green,
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text('A bit Longer',style: TextStyle(color: Colors.white)),
                  color: Colors.green,
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text('The Longest text button',style: TextStyle(color: Colors.white)),
                  color: Colors.green,
                ),
              ],
            ),
          ),
        ),
      );
    }

Tương tự bạn có thể sử dụng IntrinsicHeight trong trường hợp muốn các widget trong Row có chiều cao bằng nhau và bằng với chiều cao của widget có kích thước cao nhất

Kết Quả

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('IntrinsicHeight')),
        body: Center(
          child: IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                RotatedBox(
                    quarterTurns: 1,
                    child:RaisedButton(
                      onPressed: () {},
                      child: Text('Short',style: TextStyle(color: Colors.white)),
                      color: Colors.green,
    
                    )
                ),
                RotatedBox(
                    quarterTurns: 1,
                    child:RaisedButton(
                      onPressed: () {},
                      child: Text('A bit Longer',style: TextStyle(color: Colors.white)),
                      color: Colors.green,
                    )
                ),
                RotatedBox(
                  quarterTurns: 1,
                  child:RaisedButton(
                    onPressed: () {},
                    child: Text('The Longest text button',style: TextStyle(color: Colors.white)),
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }

Chú ý: Không nên quá lạm dụng kiểu layout này vì nó cần được wrap trong một cái speculative layout IntrinsicHeight IntrinsicWidth. Rồi mới đến layout của chúng ta

This class is relatively expensive, because it adds a speculative layout pass before the final layout phase. Avoid using it where possible. In the worst case, this widget can result in a layout that is O(N²) in the depth of the tree.

Bạn có thể xem thêm tại đây IntrinsicHeightIntrinsicWidth

Kết bài

Như vậy sau bài viết làm quen với IntrinsicHeightvà IntrinsicWidth này. Các bạn đã biết cách sử dụng IntrinsicHeightvà IntrinsicWidth 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