Đã đế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 Container
widget 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:
