Flutter for beginner

Mở Đầu

Container được sử dụng trong khá nhiều trường hợp, bởi vì tính linh động và khả năng kết hợp biến đổi widget bên trong nó,với các thuộc tính như width,height,background …

Làm quen với Container

Các thuộc tính của Container bao gồm:

Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})

1. this.child 

parameter này được sử dụng để add một widget con cho Container.

2. Color color

Thay đổi background color của Container

3. this.padding 

parameter này được sử dụng để set khoảng cách từ widget con đến các phía right,left,top và bottom của Container . Chúng ta có thể định nghĩa trong code như sau

    • final EdgeInsetsGeometry padding;

    • EdgeInsetsGeometry chúng ta có thể sử dụng EdgeInsetsDirectional hoặc EdgeInsets . EdgeInsetsDirectional thì phụ thuộc vào hướng của TextDirection . Nó sử dụng giống như EdgeInsets
    • padding:EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30),

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

4. width & height

    • Container(
        width: 200.0,
        height: 100.0,
        color: GREEN,
        child: Text("width = 200 , height = 100"),
      ),

Khi bạn không set  height hay  width của Container . Thí nó sẽ match với kích thước của widget con của nó

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Container as a layout')),
          body: Container(
            color: Colors.green,
            child: Text("Container",style: TextStyle(color: Colors.white)),
          ),
        );
      }

Nếu bạn muốn stretch Container match với parent của nó thì có thể sử dụng double.infinity cho heightwidht của nó

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Container as a layout')),
          body: Container(
            height: double.infinity,
            width: double.infinity,
            color: Colors.green,
            child: Text("Container",style: TextStyle(color: Colors.white)),
          ),
        );
      }

5. this.margin

là khoảng các từ Container đến các widget khác theo 4 hướng,margin cũng tương tự như padding cùng sử type là EdgeInsetsGeometry

    • margin:EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30),

6. this. alignment

Chúng ta có thể nhìn thấy định nghĩa

    • final AlignmentGeometry alignment;

 

Alignment có các hằng số sau

    • topLeft topCenter topRight
      centerLeft center centerRight
      bottomLeft bottomCenter bottomRight

ví dụ dùng bottomRight bạn sẽ thấy widget con nằm ở cuối và bên phải của Container

    • Container(
        color: BLUE_LIGHT,
        alignment: Alignment.bottomRight,
        height: 200,
        child: Text("this.alignment"),
      ),

hoặc chúng ta có thể sử dụng AlignmentDirectional có các hằng số như sau

    • topStart topCenter topEnd
      centerStart center centerEnd
      bottomStart bottomCenter bottomEnd

Nhưng nó sẽ phụ thuộc vào hướng của textDirection . Bạn sử dụng nó như Alignment

    • Container(
        color: YELLOW,
        height: 100.0,
        alignment: AlignmentDirectional.bottomEnd,
        child: Text(
          "HellH",
          textDirection: TextDirection.rtl,
        ),
      )

7. constrains

chúng ta có thể nhìn định nghĩa

    • BoxConstraints constraints,

nó có 3 hàm hỗ trợ là tight, looseexpand

      • tight

Có nghĩa là nếu bạn gán một kích thước cho nó. Nó sẽ tạo một giá trị cố định cho nó và không thay đổi

      • loose

Nó sẽ có giá trị max nếu bạn gán cho nó một giá trị

      • expand

Bạn có thể chọn lựa width hoặc height hoặc cả hai. Nếu bạn gán giá trị cho nó thì nó sẽ có kích thước băng đúng giá trị bạn gán. Nếu bạn không gán gì thì nó sẽ tương ứng với infinity . Nó sẽ là giá trị lớn nhất có thể trong parent widget chưa nó

8. Decoration & foregroundDecoration

Đây là 2 parameter có cùng kiểu, nhưng có ảnh hưởng khác nhau lên Container . Bạn có thể nhìn thấy sự khác nhau bên dưới foregroundDecoration nằm trên widget con, còn decoration nằm dưới widget con

    • Chưa có foregroundDecoration

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Container.foregroundDecoration')),
          body: Container(
            height: double.infinity,
            width: double.infinity,
            decoration: BoxDecoration(color: Colors.yellowAccent),
            child: Text("Hi"),
          ),
        );
      }
    • foregroundDecoration

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

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Container.foregroundDecoration')),
          body: Container(
            height: double.infinity,
            width: double.infinity,
            decoration: BoxDecoration(color: Colors.yellowAccent),
            foregroundDecoration: BoxDecoration(color: Colors.red.withOpacity(0.5)),
            child: Text("Hi"),
          ),
        );
      }

Bạn có thể thấy rằng foregroundDecoration là layer nên trên, nên ảnh bên trên nó sẽ có màu của foregroundDecoration chứ không phải của decoration

9. this.transform

Nếu bạn không muốn sử dụng Transform widget để thay đổi layout của bạn. Bạn có thể sử dụng thuộc tính transform từ Container

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

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Container.transform')),
          body: Container(
            height: 300,
            width: 300,
            transform: Matrix4.rotationZ(pi / 4),
            decoration: BoxDecoration(color: Colors.yellowAccent),
            child: Text(
              "Hi",
              textAlign: TextAlign.center,
            ),
          ),
        );
      }

 

10. BoxDecoration

    • image: DecorationImage

dùng image làm backgroundLàm quen với Container: Flutter for beginer

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('image: DecorationImage')),
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.yellow,
                image: DecorationImage(
                  fit: BoxFit.fitWidth,
                  image: NetworkImage(
                    'https://flutter.io/images/catalog-widget-placeholder.png',
                  ),
                ),
              ),
            ),
          ),
        );
      }

 

    • border: Border

Tạo border cho Container

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

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('border: Border')),
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(color: Colors.black, width: 3),
              ),
            ),
          ),
        );
      }

 

    • borderRadius: BorderRadius

Tạo radius cho container

Chú ý borderRadius không làm việc nếu shape của decoration là BoxShape.circle

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

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('borderRadius: BorderRadius')),
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                  color: Colors.green,
                  border: Border.all(color: Colors.black, width: 3),
                  borderRadius: BorderRadius.all(Radius.circular(18))),
            ),
          ),
        );
      }
    • shape: BoxShape

Box decoration có thể hoặc là rectangle,square hoặc là ellipse,circle

 

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

    • boxShadow: List<BoxShadow>

Thêm shadow tới Container. Parameter là một list, bởi vì bạn có thể thêm multiple shadows khác nhau và merge chúng cùng với nhau

 

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

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('boxShadow: List<BoxShadow>')),
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.green,
                boxShadow: const [
                  BoxShadow(blurRadius: 10),
                ],
              ),
            ),
          ),
        );
      }

 

    • gradient

Có 3 loại gradients đó là LinearGradient , RadialGradient và SweepGradient

    • LinearGradient

 

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('gradient: LinearGradient')),
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: const [
                    Colors.red,
                    Colors.blue,
                  ],
                ),
              ),
            ),
          ),
        );
      }
    • RadialGradient

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('gradient: RadialGradient')),
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: const [Colors.yellow, Colors.green],
                  stops: const [0.4, 1.0],
                ),
              ),
            ),
          ),
        );
      }
    • SweepGradient

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

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('gradient: SweepGradient')),
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  colors: const [
                    Colors.blue,
                    Colors.green,
                    Colors.yellow,
                    Colors.red,
                    Colors.blue,
                  ],
                  stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
                ),
              ),
            ),
          ),
        );
      }

 

    • backgroundBlendMode

backgroundBlendMode là thuộc tính phức tạp nhất của BoxDecoration là nó là sự pha trộn giữa colors và gradients. Đầu tiên hãy set BoxDecoration như foregroundDecoration nó được vẽ trên top của các widget nằm trong Container 

 

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

 

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('backgroundBlendMode')),
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              foregroundDecoration: BoxDecoration(
                backgroundBlendMode: BlendMode.exclusion,
                gradient: LinearGradient(
                  colors: const [
                    Colors.red,
                    Colors.blue,
                  ],
                ),
              ),
              child: Image.network(
                'https://flutter.io/images/catalog-widget-placeholder.png',
              ),
            ),
          ),
        );
      }

Chú ý rằng  backgroundBlendMode không chỉ ảnh hưởng lên Container nó thuộc mà nó còn ảnh hưởng đến tất cả thuộc widget tree từ Container này . Bạn có thể xem code bên dưới

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

    • Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('backgroundBlendMode')),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                    'https://flutter.io/images/catalog-widget-placeholder.png',
                  ),
                ),
              ),
              child: Container(
                height: 200,
                width: 200,
                foregroundDecoration: BoxDecoration(
                  backgroundBlendMode: BlendMode.exclusion,
                  gradient: LinearGradient(
                    colors: const [
                      Colors.red,
                      Colors.blue,
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }

Kết bài

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