Flutter for beginner

Mở Đầu

Để giải quyết vấn đề chồng widget lên nhau. Bài viết ngày hôm này tôi sẽ giới thiệu một widget được thiết kế để giải quyết việc đó. Đó là Stack widget

Làm quen với Stack

Các thuộc tính của stack

fit: Stackfitqui định kích thước của những widget non-positioned con. Tức là widget đó không được đặt trong layout Positioned

  • expand qui định widget non-positioned, ở đây cụ thể là Material widget có kích thước lớn nhất với cùng chứa nó. Bạn có thể nhìn thấy ở bên dưới
  • loose qui định widget non-positioned có kích thước là kích thước của chính nó
  • passthrough giữ nguyên các contraints trong trường hợp stack nằm trong trong các layout khác như Row,Column

alignment: Định nghĩa bố cục các children Widget của nó sẽ được căn chỉnh ra sao

overflow: Định nghĩa hành vi của Stack nếu kích thước của một child Widget bị tràn (overflow) khỏi kích thước của chính Stack. Nó nhận giá trị thuộc enum Overflow là hoặc Overflow.clip (mặc định) là sẽ cắt các phần bị dôi ra, và Overflow.visible là sẽ giữ nguyên cho người dùng nhìn thấy phần kích thước bị dôi ra.

textDirection: Hướng ghi chữ, mặc định là theo ngôn ngữ thiết bị.

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

 

  • Widget build(BuildContext context) {
      Widget main = Scaffold(
        appBar: AppBar(title: Text('Stack')),
      );
    
      return Stack(
        fit: StackFit.expand,
        children: <Widget>[
          main,
          Banner(
            message: "Top Start",
            location: BannerLocation.topStart,
          ),
          Banner(
            message: "Top End",
            location: BannerLocation.topEnd,
          ),
          Banner(
            message: "Bottom Start",
            location: BannerLocation.bottomStart,
          ),
          Banner(
            message: "Bottom End",
            location: BannerLocation.bottomEnd,
          ),
        ],
      );
    }

Trong trương hợp bạn muốn chồng widget theo vị trí xác định. Bạn có thể làm như sau

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('Stack')),
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Material(color: Colors.yellowAccent),
            Positioned(
              top: 0,
              left: 0,
              child: Icon(Icons.star, size: 50,color: Colors.green,),
            ),
            Positioned(
              top: 340,
              left: 250,
              child: Icon(Icons.call, size: 50,color: Colors.green),
            ),
          ],
        ),
      );
    }

Nếu bạn không muốn đoán giá trị top/bottom . Bạn có thể sử dụng LayoutBuilder để xác đinh chúng

  • Widget build(BuildContext context) {
      const iconSize = 50.0;
      return Scaffold(
        appBar: AppBar(title: Text('Stack with LayoutBuilder')),
        body: LayoutBuilder(
          builder: (context, constraints) =>
              Stack(
                fit: StackFit.expand,
                children: <Widget>[
                  Material(color: Colors.yellowAccent),
                  Positioned(
                    top: 0,
                    child: Icon(Icons.star, size: iconSize,color: Colors.green),
                  ),
                  Positioned(
                    top: constraints.maxHeight - iconSize,
                    left: constraints.maxWidth - iconSize,
                    child: Icon(Icons.call, size: iconSize,color: Colors.green),
                  ),
                ],
              ),
        ),
      );
    }

Kết bài

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