如何在Flutter应用程序中创建不同的渐变[Flutter专题20]

徐建国

发布于 2021-12-22 11:48:41

4.6K0

发布于 2021-12-22 11:48:41

文章被收录于专栏：个人路线个人路线

大家好。我是坚果，如果你迷惘，不妨看看码农的轨迹

Flutter 可用于创建漂亮的 UI。因此，在今天的文章中，我们将看到如何在应用程序中创建不同的渐变。

开始吧

第 1 步： 创建一个新的 Flutter 应用程序。

第 2 步： 对于渐变，我们必须使用Container小部件，其中我们将拥有 BoxDecoration 属性，这将允许我们为我们的应用程序创建渐变。

例如：

Container(

            height: 300,

            width: 300,

            decoration: BoxDecoration(

              gradient: 

            ),

          ),

现在我们在 Flutter 中有不同类型的渐变

SweepGradient：创建一个扇形渐变。
LinearGradient：创建线性渐变。
RadialGradius：创建放射状渐变。

对于Sweep Gradient，您可以像这样使用它

Container(
              height: 300,
              width: 300,
              decoration: BoxDecoration(
                  gradient: SweepGradient(
                      colors: [Colors.green, Colors.lightBlue, Colors.red])),
            ),

对于放射状渐变，您可以像这样使用它

  Container(
              height: 300,
              width: 300,
              decoration: BoxDecoration(
                  gradient: RadialGradient(
                      colors: [Colors.red, Colors.blue, Colors.green])),
            ),

对于线性渐变，您可以像这样使用它

 Container(
              height: 300,
              width: 300,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Colors.deepOrange, Colors.yellow.shade300])),
            ),

第 3 步： 现在要更改渐变的对齐方式，您可以在 BoxDecoration 的渐变属性中使用 AlignmentGeometry begin = Alignment.centerLeft, AlignmentGeometry end = Alignment.centerRight。

例如

decoration: BoxDecoration(

                gradient: LinearGradient(

                    begin: Alignment.centerLeft,

                    end: Alignment.centerRight,

                    colors: [Colors.deepOrange, Colors.yellow.shade300])),

在 Flutter 中创建渐变的完整示例代码

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'package:scroll_snap_list/scroll_snap_list.dart';

 

void main() {

  runApp(MyApp());

}

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: Demo(),

      theme: ThemeData(

        brightness: Brightness.dark,

      ),

    );

  }

}

 

class Demo extends StatelessWidget {

  const Demo({Key? key}) : super(key: key);

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(

          title: const Text('Gradients'),

        ),

        body: Center(

          child: Container(

            height: 300,

            width: 300,

            decoration: BoxDecoration(

                gradient: LinearGradient(

                    begin: Alignment.centerLeft,

                    end: Alignment.centerRight,

                    colors: [Colors.deepOrange, Colors.yellow.shade300])),

          ),

        ));

  }

}

输出：