Flutter Web 持久标头

Posted 2023-02-23

【中文标题】Flutter Web 持久标头

【英文标题】：Flutter Web persistent header

【发布时间】：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"),
        ),
      ),
    ]);
  

【参考方案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,
        ),
      ),
    );