Flutter for beginner

Mở Đầu

Trong bài viết ngày hôm nay mình sẽ giới thiệu đến với các bạn một Widget đơn giản nhưng được sử dụng thường xuyên đó là SizedBox

Làm quen với SizedBox

1. SizedBox có thể làm việc giống như một ConstrainedBox

Làm quen với SizedBox: Flutter for beginner

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SizedBox.expand(
          child: Card(
              child: Center(child: Text('Hello World!',style: TextStyle(color: Colors.white),),),
              color: Colors.green
          ),
        ),
      );
    }
    
    

hoặc bạn có thể set height,width hoặc cả 2 cho SizedBox 

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SizedBox(
          width: 200.0,
          height: 200.0,
          child: Card(
              child: Center(child: Text('Hello World!',style: TextStyle(color: Colors.white),),),
              color: Colors.green
          ),
        ),
      );
    }

 

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SizedBox(
          width: double.infinity,
          height: 200.0,
          child: Card(
              child: Center(child: Text('Hello World!',style: TextStyle(color: Colors.white),),),
              color: Colors.green
          ),
        ),
      );
    }

2. SizedBox có thể trở thành các padding ngăn cách các widget

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              children: <Widget>[
                Icon(Icons.star, size: 50,color: Colors.green,),
                const SizedBox(height: 100.0),
                Icon(Icons.star, size: 50,color: Colors.green),
                Icon(Icons.star, size: 50,color: Colors.green),
              ],
            )
          ],
        ),
      );
    }

3. SizedBox có thể giúp cho một widget ẩn và hiện trên màn hình

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              children: <Widget>[
                isVisible
                    ? Icon(Icons.star, size: 150,color: Colors.green,)
                    : const SizedBox(),
                FlatButton(
                  child: Text("Demo"),
                  onPressed: () {
                    setState(() {
                      isVisible = !isVisible;
                    });
                  },
                ),
              ],
            )
          ],
        ),
      );
    }

 

Kết bài

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