Bắt đầu với Flutter – Dogs App: Gradients Background

Đã đến lúc làm cho ứng dụng của chúng ta đẹp hơn bằng cách thêm Gradients Background. Gradients trong Flutter cũng rất đơn giản, giống như trong CSS.

Để sử dụng gradient, trước tiên bạn cần một Containerwidget và bạn cần truy cập thuộc tính decoration của nó.

Bắt đầu bằng cách xây dựng decoration của Container widget trong  phương thức build của _MyHomePageState  trong main.dart:

// main.dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
      backgroundColor: Colors.black87,
    ),
    body: Container(
      // Add box decoration
      decoration: BoxDecoration(
        // Box decoration takes a gradient
        gradient: LinearGradient(
          // Where the linear gradient begins and ends
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          // Add one stop for each color. Stops should increase from 0 to 1
          stops: [0.1, 0.5, 0.7, 0.9],
          colors: [
            // Colors are easy thanks to Flutter's Colors class.
            Colors.indigo[800],
            Colors.indigo[700],
            Colors.indigo[600],
            Colors.indigo[400],
          ],
        ),
      ),
      child: Center(
        child: DogList(initialDoggos),
      ),
    ),
  );
}

Và kết quả hiện tại: