使用子窗口小部件添加动画，并删除“ Flutter自定义窗口小部件”的子窗口小部件

Question

  

我有两个问题：

My App Running Gif

**当我切换TabView时，我的搜索栏状态更新会有所延迟，但是如果使用TabBar切换页面则没有问题。**

我的搜索栏小部件是一个自定义小部件，它在不同页面上具有不同的用户界面，我想在不同用户界面之间使用抖动动画来过度平滑某些内容，例如动画的大小，逐渐淡出，但是我不知道开始和结束的大小，请告诉我该怎么做。

我的代码：

import 'package:flutter/material.dart';

const List<String> TAB_TITLES = <String>[
  "CHOICENESS",
  "ORIGINAL",
  "FOCUS",
  "TV"
];

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Viedeo App",
      theme: new ThemeData(
          primaryColor: Colors.grey[800],
          accentColor: Colors.blue,
          fontFamily: "yong-circle"),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: TAB_TITLES.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        titleSpacing: 4,
        title: TabBar(
          labelColor: Colors.blue,
          unselectedLabelColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.label,
          labelStyle: Theme.of(context).textTheme.title,
          isScrollable: true,
          controller: _tabController,
          tabs: _buildTabBar(context),
        ),
        bottom: SearchBarWidget(_tabController),
      ),
      body: TabBarView(
        controller: _tabController,
        children: _buildTabView(context),
      ),
    );
  }

  List<Widget> _buildTabBar(BuildContext context) {
    return TAB_TITLES
        .map((title) => Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[Text(title), SizedBox(height: 4)],
            ))
        .toList();
  }

  List<Widget> _buildTabView(BuildContext context) {
    final style = Theme.of(context).textTheme.display3;
    return TAB_TITLES
        .map((title) => Center(child: Text(title, style: style)))
        .toList();
  }
}

class SearchBarWidget extends StatefulWidget implements PreferredSizeWidget {
  final TabController controller;
  SearchBarWidget(this.controller);
  @override
  _SearchBarWidgetState createState() => _SearchBarWidgetState();
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

class _SearchBarWidgetState extends State<SearchBarWidget> {
  int _currentSelectedIndex;
  @override
  void initState() {
    super.initState();
    _currentSelectedIndex = widget.controller.index;
    widget.controller.addListener(_onTabSelected);
  }

  void _onTabSelected() {
    setState(() {
      _currentSelectedIndex = widget.controller.index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
        titleSpacing: 0,
        title: Container(
            padding: EdgeInsets.symmetric(horizontal: 12),
            child: Row(children: _getActionBtns(_currentSelectedIndex))));
  }

  List<Widget> _getActionBtns(int index) {
    List<Widget> list = <Widget>[Expanded(child: SearchWidget())];
    if (_currentSelectedIndex == 0) {
      list.add(Row(children: <Widget>[
        IconButton(onPressed: () {}, icon: Icon(Icons.arrow_downward)),
        IconButton(onPressed: () {}, icon: Icon(Icons.scanner)),
      ]));
    } else if (_currentSelectedIndex == 3) {
      list.add(
        Container(
          height: 30,
          margin: EdgeInsets.only(left: 16),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(50)),
              color: Colors.grey[600]),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                _ActionBtn("Youtue"),
                _ActionBtn("NetFlix"),
                _ActionBtn("Vimeo")
              ]),
        ),
      );
    }
    return list;
  }
}

class _ActionBtn extends StatelessWidget {
  final String title;
  _ActionBtn(this.title);
  @override
  Widget build(BuildContext context) {
    TextStyle style = TextStyle(color: Colors.white);
    return ButtonTheme(
        minWidth: 0,
        padding: EdgeInsets.symmetric(horizontal: 5),
        child: FlatButton(onPressed: () {}, child: Text(title, style: style)));
  }
}

class SearchWidget extends StatefulWidget {
  @override
  _SearchWidgetState createState() => _SearchWidgetState();
}

class _SearchWidgetState extends State<SearchWidget> {
  String _newestMsgDesc;

  setNewestMsg(String msg) {
    setState(() {
      _newestMsgDesc = msg;
    });
  }

  @override
  void initState() {
    super.initState();
    _newestMsgDesc = "Custom Search";
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 30,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(50)),
          color: Colors.grey[600]),
      child: FlatButton(
        onPressed: () {},
        child: Row(
          children: <Widget>[
            Expanded(
              child: Text(
                _newestMsgDesc,
                textAlign: TextAlign.center,
                style: Theme.of(context)
                    .textTheme
                    .caption
                    .copyWith(color: Colors.white),
              ),
            ),
            Icon(
              Icons.search,
              color: Colors.white,
            ),
          ],
        ),
      ),
    );
  }
}