Question

如何使标签栏像下面的图像一样颤动？
是否可以开发下面的标签栏？
如果不可能，那么下一个更好的解决方案是什么？

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(home: MainScreen()),
    );

class MainScreen extends StatefulWidget {
  _MainState createState() => _MainState();
}

class _MainState extends State<MainScreen> {
  int viewChoice = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text(
            'Toolbar Title',
            style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold /*fontSize,etc*/),
          ),
          actions: [
            IconButton(
                icon: Icon(Icons.account_circle),
                onPressed: () {
                  //Todo when pressed
                }),
          ]),
      body: Container(
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          SizedBox(
            height: 200,
            width: double.infinity,
            child: Stack(children: [
              Container(
                padding: EdgeInsets.all(10.0),
                alignment: Alignment.centerLeft,
                color: Colors.yellow,
                height: 100.0,
                width: double.infinity,
                child: Text('Tem',
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0)), //Tem is in your ex pic
              ),
              Positioned(
                top: 75.0,
                left: 40.0,
                right: 40.0,
                child: Container(
                  margin: EdgeInsets.only(left: 25.0, right: 25.0),
                  alignment: Alignment.topCenter,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(14.0),
                      border: Border.all(color: Colors.black, width: 1.0)),
                  child: Row(mainAxisSize: MainAxisSize.min, children: [
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: viewChoice == 0
                              ? LinearGradient(
                                  colors: [Colors.orange, Colors.orangeAccent],
                                )
                              : null,
                          borderRadius: BorderRadius.circular(13.0),
                          border: viewChoice == 0
                              ? Border.all(color: Colors.black, width: 1.0)
                              : null,
                        ),
                        child: FlatButton(
                          color: Colors.transparent,
                          onPressed: () {
                            setState(() {
                              viewChoice = 0;
                            });
                          },
                          child: Text(
                            'All',
                            /*style as your requirement*/
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: viewChoice == 1
                              ? LinearGradient(
                                  colors: [Colors.orange, Colors.orangeAccent],
                                )
                              : null,
                          borderRadius: BorderRadius.circular(13.0),
                          border: viewChoice == 1
                              ? Border.all(color: Colors.black, width: 1.0)
                              : null,
                        ),
                        child: FlatButton(
                          onPressed: () {
                            setState(() {
                              viewChoice = 1;
                            });
                          },
                          child: Text(
                            'Favorites',
                            /*style as your requirement*/
                          ),
                        ),
                      ),
                    ),
                  ]),
                ),
              ),
            ]),
          ),
          viewChoice == 0
              ? ListView(shrinkWrap: true, children: [
                  //Content of All categories
                ])
              : ListView(shrinkWrap: true, children: [
                  //Content of All categories
                ])
        ]),
      ),
    );
  }
}

Answer 2

尝试这种方式

我已经使用ScrollablePositionedList

创建了标签布局

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widgets/flutter_widgets.dart';

void main() => runApp(HomeScreen());
int currentTab = 0;

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenPage createState() => _HomeScreenPage();
}

class TabModel {
  String text;

  TabModel({this.text});
}

List<TabModel> _tabList = [
  TabModel(text: "Android"),
  TabModel(text: "IOS"),
  TabModel(text: "Java"),
  TabModel(text: "JavaScript"),
  TabModel(text: "PHP"),
  TabModel(text: "HTML"),
  TabModel(text: "C++"),
];

class _HomeScreenPage extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  PageController _controller = PageController(initialPage: 0, keepPage: false);

  final ItemScrollController itemScrollController = ItemScrollController();
  final ItemPositionsListener itemPositionListener =
      ItemPositionsListener.create();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        theme: ThemeData(
            primarySwatch: Colors.purple,
            brightness: Brightness.light,
            accentColor: Colors.red),
        darkTheme: ThemeData(
          brightness: Brightness.dark,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text("Custom TabBar"),
            ),
            body: Column(
              children: <Widget>[
                Container(
                    height: 60,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(14.0),
                        border: Border.all(color: Colors.black, width: 1.0)),
                    child: ScrollablePositionedList.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: _tabList.length,
                      itemBuilder: (context, index) {
                        return Container(
                          decoration: BoxDecoration(
                            gradient: currentTab == index
                                ? LinearGradient(
                                    colors: [
                                      Colors.redAccent,
                                      Colors.redAccent[200],
                                      Colors.redAccent[100]
                                    ],
                                  )
                                : null,
                            borderRadius: BorderRadius.circular(13.0),
                          ),
                          child: FlatButton(
                            color: Colors.transparent,
                            onPressed: () {
                              setState(() {
                                currentTab = index;
                                _controller.jumpToPage(currentTab);
                              });
                            },
                            child: Text(
                              _tabList[index].text,
                            ),
                          ),
                        );
                      },
                      itemScrollController: itemScrollController,
                      itemPositionsListener: itemPositionListener,
                    )),
                Flexible(
                    child: Container(
                  child: PageView(
                    controller: _controller,
                    onPageChanged: (pageId) {
                      setState(() {
                        currentTab = pageId;
                        itemScrollController.scrollTo(
                            index: currentTab, duration: Duration(seconds: 1));
                      });
                    },
                    children: <Widget>[
                      Container(
                        color: Colors.pink,
                        child: Center(
                          child: Text(
                            _tabList[currentTab].text,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.cyan,
                        child: Center(
                          child: Text(
                            _tabList[currentTab].text,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.red,
                        child: Center(
                          child: Text(
                            _tabList[currentTab].text,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.green,
                        child: Center(
                          child: Text(
                            _tabList[currentTab].text,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.grey,
                        child: Center(
                          child: Text(
                            _tabList[currentTab].text,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.purple,
                        child: Center(
                          child: Text(
                            _tabList[currentTab].text,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.teal,
                        child: Center(
                          child: Text(
                            _tabList[currentTab].text,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    ],
                  ),
                )),
              ],
            )));
  }
}

您可以找到此演示from my github account的源代码

输出

如何使用渐变制作自定义标签栏

2 个答案: