Флаттер: Кто-нибудь может помочь сделать пользовательский TabController в флаттере?

Question

Я делаю приложение, используя флаттер (дротик).Мне нужно сделать вкладку контроллера с градиентным цветом фона.Я использовал DefaultTabController, но не смог найти способ добавить украшение или градиент для панели приложения. Пожалуйста, найдите мой код ниже:

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

вы можете попробовать это

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,),),



],
),

Answer 2

Виджеты 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,
      ],
    );
  }
}