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

1414

Flutter for beginer

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 hay được sử dụng trong ListView hoặc khi bạn muốn tạo các đường kẻ trong Flutter đó là Divider .

Làm quen với Divider

  • Divider(
      color: Colors.black,
      indent: 20.0,
      height: 0.0,
    )

color: Màu của Divider

indent: Là khoảng cách so với lề bên trái của Divider

height: Là chiều cao của Divider và nó giống như là padding theo chiều dọc top và bottom. Nhưng nếu height bằng 0.0 thì sẽ không có padding theo top và bottom

  • Sử dụng Divider trong ListView

 

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: new ListView.separated(
            separatorBuilder: (context, index) => Divider(
              color: Colors.black,
              indent: 20.0,
              height: 0.0,
            ),
            itemCount: 50,
            itemBuilder: (BuildContext context, int index) {
              return new Padding(
                padding: EdgeInsets.all(20.0),
                child: Center(child: Text("Index $index")),
              );
            }
        ),
      );
    }
  • Sử dụng Divider làm separator

divider

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: new Column(
          children: <Widget>[
            new Container(
              width: double.infinity,
              height: 200,
              color: Colors.green,
            ),
            const Divider(
              color: Colors.black,
              indent: 20.0,
              height: 10.0,
            ),
            new Container(
              width: double.infinity,
              height: 200,
              color: Colors.green,
            ),
          ],
        ),
      );
    }

Kết bài

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