Flutter渐变效果组件插件gradient_widgets_plus的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter渐变效果组件插件gradient_widgets_plus的使用


Pub

Gradient Widgets

Gradient Widgets

截至 ^1.0.0 版本,渐变按钮和卡片支持 shadowColor 属性。

这是一组具有精美渐变效果的 Flutter 小部件。

您可以使用它们来吸引用户的注意力,例如登录或发送操作,或者重要的购物项目标题(查看 Gradient Screens 以了解更多信息😉)。

  • ☑️ GradientText
  • ☑️ GradientCard
  • ☑️ GradientButton
  • ☑️ CircularGradientButton + Shadow Color
  • ☑️ GradientProgressIndicator
  • ☑️ CircularGradientProgressIndicator
  • ◻️ GradientAppBar

安装

在您的 pubspec.yaml 文件中添加:

dependencies:
  gradient_widgets_plus: ^1.0.0

然后,

import 'package:gradient_widgets_plus/gradient_widgets_plus.dart';

使用

Card + Gradient
GradientCard(
    gradient: Gradients.tameer,
    shadowColor: Gradients.tameer.colors.last.withOpacity(0.25),
    elevation: 8,
);

大多数参数与 Card 相同。

Progress Indicator + Gradient

Gradient Widgets

必须满足 gradient.colors.length = 2

不定态

GradientProgressIndicator(gradient: Gradients.rainbowBlue,);

定态

GradientProgressIndicator(
  gradient: Gradients.rainbowBlue,
  value: 0.65,
);
Circular Progress Indicator + Gradient

Circular Gradient Progress Widgets

必须满足 gradient.colors.length = 2

不定态

GradientCircularProgressIndicator(
  gradient: Gradients.aliHussien,
);

定态

GradientCircularProgressIndicator(
  gradient: Gradients.aliHussien,
  radius: 100,
);
Normal Button + Gradient
GradientButton(
  child: Text('Gradient'),
  callback: () {},
  gradient: Gradients.backToFuture,
  shadowColor: Gradients.backToFuture.colors.last.withOpacity(0.25),
),

大多数参数与任何 *Button 相同。

Circular Button + Gradient
CircularGradientButton(
  child: Icon(Icons.gradient),
  callback: (){},
  gradient: Gradients.rainbowBlue,
  shadowColor: Gradients.rainbowBlue.colors.last.withOpacity(0.5),
),

大多数参数与 FloatingActionButton 相同。

Text + Gradient
GradientText(
  'Hello',
  shaderRect: Rect.fromLTWH(0.0, 0.0, 50.0, 50.0),
  gradient: Gradients.hotLinear,
  style: TextStyle(fontSize: 40.0,),
),

更多关于Flutter渐变效果组件插件gradient_widgets_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter渐变效果组件插件gradient_widgets_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用gradient_widgets_plus插件来实现渐变效果的代码示例。gradient_widgets_plus是一个扩展库,提供了多种使用渐变效果的组件。

首先,你需要在你的pubspec.yaml文件中添加该插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  gradient_widgets_plus: ^x.y.z  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

以下是一个简单的示例,展示如何使用GradientContainer来实现一个带有渐变背景的容器:

import 'package:flutter/material.dart';
import 'package:gradient_widgets_plus/gradient_widgets_plus.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Widgets Plus Example'),
        ),
        body: Center(
          child: GradientContainer(
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.red],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Gradient Container',
                    style: TextStyle(fontSize: 24, color: Colors.white),
                  ),
                  SizedBox(height: 16),
                  Text(
                    'This is a container with a linear gradient background.',
                    style: TextStyle(fontSize: 16, color: Colors.white),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们使用了GradientContainer组件,并为其设置了一个线性渐变(LinearGradient)。渐变从左上角(Alignment.topLeft)到右下角(Alignment.bottomRight),颜色从蓝色(Colors.blue)渐变到红色(Colors.red)。

GradientContainerchild属性接受一个子组件,这里我们放置了一个居中的Column,其中包含了两个文本组件。

此外,gradient_widgets_plus还提供了其他多种渐变组件,如GradientTextGradientBoxDecoration等,你可以根据需要选择使用。

例如,使用GradientText来创建一个带有渐变效果的文本:

GradientText(
  text: 'Gradient Text',
  style: TextStyle(fontSize: 24),
  gradient: LinearGradient(
    colors: [Colors.green, Colors.yellow],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
)

希望这个示例能帮助你理解如何在Flutter中使用gradient_widgets_plus插件来实现渐变效果。

回到顶部