Flutter ：任何人都可以帮助在 flutter 中制作自定义 TabController 吗？

Question

我正在使用 flutter(dart) 制作一个应用程序。我需要制作一个具有渐变背景颜色的选项卡控制器。我使用了 DefaultTabController 但无法为 App 添加装饰或任何渐变 bar.Please 在下面找到我的代码：

import 'package:flutter/material.dart';
import 'package:vtech/CustomAppBar.dart';

class Policy extends StatefulWidget {
  @override
  _PolicyState createState() => _PolicyState();
}

class _PolicyState extends State<Policy> {
  @override
  Widget build(BuildContext context) {




    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(

          appBar: AppBar(
            backgroundColor: Colors.pink,
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Center(child:Text('POLICY')),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );

  }
}

Answer 1

AppBar 和 TabBar 小部件不允许设置渐变，只能设置颜色。

要实现您的需要，您可以创建一个自定义小部件 GradientAppBar 或 GradientTabBar，该小部件使用 Stack 构建，集成了 Container 渐变和 AppBar 或 TabBar.

您创建 GradientAppBar 时使用的参数将转到 Container 和 AppBar 本身。

这里是 Gradient AppBar 的一个工作示例。下面是 TabBar 的类似示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Policy(),
    );
  }
}

class Policy extends StatefulWidget {
  @override
  _PolicyState createState() => _PolicyState();
}

class _PolicyState extends State<Policy> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: GradientAppBar(
            colors: [Colors.white, Colors.black],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            elevation: 4.0,
            bottom: TabBar(
              indicatorColor: Colors.white,
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Center(child: Text('POLICY')),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

class GradientAppBar extends StatefulWidget implements PreferredSizeWidget {
  // Gradiente properties
  final AlignmentGeometry begin;
  final AlignmentGeometry end;
  final List<Color> colors;

  // Material property
  final double elevation;

  // AppBar properties - Add all you need to change
  final Widget title;
  final PreferredSizeWidget bottom;

  @override
  final Size preferredSize;

  GradientAppBar({
    Key key,
    @required this.colors,
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    this.elevation,
    this.title,
    this.bottom,
  })  : preferredSize = new Size.fromHeight(
            kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
        super(key: key); //appBar.preferredSize;

  @override
  _GradientAppBarState createState() => _GradientAppBarState();
}

class _GradientAppBarState extends State<GradientAppBar> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Material(
          elevation: widget.elevation,
          child: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
              begin: widget.begin,
              end: widget.end,
              colors: widget.colors,
            )),
          ),
        ),
        AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          bottom: widget.bottom,
          title: widget.title,
        ),
      ],
    );
  }
}

这里是渐变 TabBar 的示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Policy(),
    );
  }
}

class Policy extends StatefulWidget {
  @override
  _PolicyState createState() => _PolicyState();
}

class _PolicyState extends State<Policy> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: GradientTabBar(
              colors: [Theme.of(context).primaryColor, Colors.green],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              tabBar: TabBar(
                //indicatorColor: Colors.white,
                tabs: [
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
            ),
            title: Center(child: Text('POLICY')),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

class GradientTabBar extends StatefulWidget implements PreferredSizeWidget {
  // Gradiente properties
  final AlignmentGeometry begin;
  final AlignmentGeometry end;
  final List<Color> colors;

  final TabBar tabBar;

  GradientTabBar({
    Key key,
    @required this.colors,
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    this.tabBar,
  }) : super(key: key);

  @override
  Size get preferredSize => tabBar.preferredSize;

  @override
  _GradientTabBarState createState() => _GradientTabBarState();
}

class _GradientTabBarState extends State<GradientTabBar> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          height: widget.preferredSize.height,
          decoration: BoxDecoration(
              gradient: LinearGradient(
            begin: widget.begin,
            end: widget.end,
            colors: widget.colors,
          )),
        ),
        widget.tabBar,
      ],
    );
  }
}

Answer 2

你可以试试这个

flexibleSpace: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [
                  Colors.red,
                  Colors.blue
                ],
              ),
            ),
          ),

在应用栏

  appBar: AppBar(
  title: Center(child: Text("Add Student",),),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [
          darkblue,
          darkpurple
        ],
      ),
    ),
  ),
actions: <Widget>[
    IconButton(
    icon: Icon(Icons.account_circle,color: Colors.white,),),



],
),

Flutter ：任何人都可以帮助在 flutter 中制作自定义 TabController 吗？

Flutter : Can anybody help making custom TabController in flutter?

dart

flutter

flutter-dependencies

flutter-layout