Flutter Web 持久标头答案

【问题标题】：Flutter Web persistent headerFlutter Web 持久标头
【发布时间】：2019-10-29 10:36:09
【问题描述】：

随着 web 的 Flutter 的引入，我试图实现一个网站样式的标题，该标题在使用路由时和整个应用程序中都是持久的。 Appbar 似乎不是解决方案，因为每个脚手架都有自己的 appBar。我用MaterialApp 创建了Column 中的标题小部件。但是，这种实现感觉是错误的，因为一切都应该是 MaterialApp 或 CupertinoApp 的孩子。

如果 searchBar 标头可以放置在 MaterialApp 中，并且我能够使用 Navigator，那将是首选。我真的在这里寻求指导和“正确”的方法。

void main() {
  initKiwi();
//  BlocSupervisor().delegate = AppBlocDelegate();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Material(
        elevation: 2.0,
        color: Colors.white,
        child: MediaQuery(
          data: MediaQueryData.fromWindow(ui.window),
          child: Directionality(
            textDirection: TextDirection.ltr,
            child: Container(
              height: 50,
              child: SearchBar(),
            ),
          ),
        ),
      ),
      Expanded(
        child: MaterialApp(
          title: 'Discover Brindle',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            fontFamily: 'Brdl',
          ),
          home: Text("Pages & Routes Here"),
        ),
      ),
    ]);
  }
}

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

虽然它没有使用路由，但我可以使用IndexedStack 解决这个问题。这也保留了我在关闭搜索页面时在ProductsPage() 中所做的任何滚动。 AppBar 是持久的，并且能够将代码保持在最低限度。

main.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Discover Brindle',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'Brdl'
      ),
      home: MainPage(),
    );
  }
}

main_page.dart

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final _searchBloc = kiwi.Container().resolve<SearchBloc>();
  final _productsBloc = kiwi.Container().resolve<ProductsBloc>();
  PageController pageController;
  int currentPage = 0;

  void _onSearchActive({bool isActive}) {
    setState(() {
      this.currentPage = isActive ? 1 : 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: _buildScaffold(),
    );
  }

  Widget _buildScaffold() {
    return BlocProviderTree(
      blocProviders: [
        BlocProvider<SearchBloc>(bloc: _searchBloc),
        BlocProvider<ProductsBloc>(bloc: _productsBloc),
      ],
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: SearchBar(onIsActive: _onSearchActive),
        ),
        body: IndexedStack(
          children: [
            ProductsPage(),
            SearchPage(),
          ],
          index: currentPage,
        ),
      ),
    );
  }
}

【讨论】：