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

喜欢Material设计的AppBar吗？想要给AppBar添加更多颜色吗？这里有一个新的解决方案：newGradientAppBar。

它的工作方式与普通的AppBar完全相同。你可以添加操作按钮、返回按钮和标题等。因此，这只是一个普通的AppBar，但多了一点色彩！

截图

入门指南

步骤1

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

dependencies:
  new_gradient_app_bar: ^0.1.4

步骤2

导入库：

import 'package:new_gradient_app_bar/new_gradient_app_bar.dart';

步骤3

将当前的AppBar替换为NewGradientAppBar。

示例代码如下：

import 'package:flutter/material.dart';
import 'package:new_gradient_app_bar/new_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, required 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: NewGradientAppBar(
          // 设置AppBar的标题
          title: Text(widget.title),
          // 设置渐变颜色
          gradient: LinearGradient(colors: [Colors.red, Colors.purple]),
          // 设置底部的TabBar
          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.headline4,
              ),
            ],
          ),
        ),
        // 添加一个浮动按钮
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
        ),
      ),
    );
  }
}