Flutter渐变应用栏插件gradient_app_bar的使用

Flutter渐变应用栏插件gradient_app_bar的使用

喜欢Material Design的AppBar吗？想给AppBar添加更多颜色吗？这里有一个渐变AppBar！

它的工作方式与普通的AppBar一样。也可以有操作按钮、返回按钮和标题。所以它只是你的普通AppBar，但多了一点花样！

截图

image

image

开始使用

步骤 1

在pubspec.yaml文件中添加依赖：

dependencies:
  gradient_app_bar: ^0.0.1

步骤 2

导入插件：

import 'package:gradient_app_bar/gradient_app_bar.dart';

步骤 3

将当前的AppBar替换为GradientAppBar。添加backgroundColorStart和backgroundColorEnd即可创建一个渐变AppBar！

完整示例代码

以下是一个完整的示例代码，展示如何使用gradient_app_bar插件：

import 'package:flutter/material.dart';

// 导入GradientAppBar插件
import './../../lib/gradient_app_bar.dart'; // 注意：根据实际路径调整

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2, // 设置底部标签栏的数量
      child: Scaffold(
        appBar: GradientAppBar( // 使用GradientAppBar
          title: Text(widget.title), // 设置标题
          gradient: LinearGradient(colors: [Colors.red, Colors.purple]), // 设置渐变颜色
          bottom: TabBar( // 添加底部标签栏
            tabs: [
              Tab(
                icon: Icon(Icons.home), // 首页图标
                text: 'Home', // 首页文字
              ),
              Tab(
                icon: Icon(Icons.store), // 商店图标
                text: 'Store', // 商店文字
              )
            ],
          ),
        ),
        body: Center( // 页面主体内容
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
            children: [
              Text('你已经点击了按钮这么多次：'), // 显示提示文字
              Text(
                '$_counter', // 动态显示点击次数
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton( // 浮动按钮
          onPressed: _incrementCounter, // 点击按钮时增加计数器
          tooltip: 'Increment', // 提示文字
          child: Icon(Icons.add), // 按钮图标
          backgroundColor: Colors.red, // 按钮背景颜色
        ),
      ),
    );
  }
}

更多关于Flutter渐变应用栏插件gradient_app_bar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


gradient_app_bar 是一个用于 Flutter 的插件，它允许你创建一个带有渐变背景的应用栏（AppBar）。这个插件非常适用于那些想要在应用栏中使用渐变背景的开发者。

安装

首先，你需要在 pubspec.yaml 文件中添加 gradient_app_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  gradient_app_bar: ^0.1.3

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

使用

在你的 Dart 文件中导入 gradient_app_bar：

import 'package:gradient_app_bar/gradient_app_bar.dart';

接下来，你可以在 Scaffold 的 appBar 属性中使用 GradientAppBar：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gradient AppBar Example',
      home: Scaffold(
        appBar: GradientAppBar(
          title: Text('Gradient AppBar'),
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.green],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        body: Center(
          child: Text('Hello, Gradient AppBar!'),
        ),
      ),
    );
  }
}

参数说明

GradientAppBar 提供了多个参数来定制应用栏的外观和行为：

  • title: 应用栏的标题，通常是一个 Text 组件。
  • gradient: 用于应用栏背景的渐变，通常是一个 LinearGradient 或 RadialGradient。
  • actions: 应用栏右侧的操作按钮列表。
  • leading: 应用栏左侧的组件，通常是返回按钮。
  • centerTitle: 是否将标题居中。
  • elevation: 应用栏的阴影高度。
  • brightness: 应用栏的亮度（Brightness.light 或 Brightness.dark）。
  • iconTheme: 应用栏图标的主题。
  • textTheme: 应用栏文本的主题。

示例

以下是一个更复杂的示例，展示了如何使用 GradientAppBar 的多个参数：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gradient AppBar Example',
      home: Scaffold(
        appBar: GradientAppBar(
          title: Text('Gradient AppBar'),
          gradient: LinearGradient(
            colors: [Colors.purple, Colors.blue],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () {},
            ),
          ],
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          centerTitle: true,
          elevation: 10.0,
          brightness: Brightness.dark,
        ),
        body: Center(
          child: Text('Hello, Gradient AppBar!'),
        ),
      ),
    );
  }
}
回到顶部