如何在仍然显示Widgets的情况下将我的AppBar放在Flutter中的单独文件中?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在仍然显示Widgets的情况下将我的AppBar放在Flutter中的单独文件中?相关的知识,希望对你有一定的参考价值。

我目前正在构建一个Flutter应用程序,推荐该地区的餐馆。但是,我已经陷入了困境。

为了组织和清洁,我希望我的应用程序将App Bar的代码与每个屏幕的代码分开。所以,我将Kain AppBar.dart构建为AppBar代码。它显示在这里:

import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

GoogleSignIn _googleSignIn = GoogleSignIn(
  signInOption: SignInOption.standard,
);

class KainAppBar extends StatelessWidget 
  final String title;

  KainAppBar(this.title);

  @override
  Widget build(BuildContext context) 

    return Scaffold(
      appBar: new GradientAppBar(
      centerTitle: true,
      title: new Text('Kain',
      style: TextStyle(
        fontFamily: 'Quiapo', fontSize: 36.0, fontWeight: FontWeight.w600
      )),
      backgroundColorStart: Colors.red[400],
      backgroundColorEnd: Colors.red[900],
    ),
    drawer: new Drawer(
      child: ListView(
        children: <Widget>[
          new UserAccountsDrawerHeader(
            decoration: BoxDecoration(
              color: Colors.red[800],
            ),
            accountName: new Text('Guest'),
            accountEmail: new Text('guestemail@email.com'),
            currentAccountPicture: new CircleAvatar(
              backgroundImage: new NetworkImage('https://avatarfiles.alphacoders.com/848/84855.jpg'),
            ),
          ),
          new ListTile(
            title: new Text('Restaurants'),
            leading: Icon(Icons.restaurant_menu),
            onTap: ()
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('/restaurant_screen');
            ,
          ),
          new ListTile(
            title: new Text('Nearby'),
            leading: Icon(Icons.near_me),
            onTap: ()
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('/nearby_screen');
            ,
          ),
          new ListTile(
            title: new Text('Request Restaurant'),
            leading: Icon(Icons.library_add),
            onTap: ()
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('/request_screen');
            ,
          ),
          new ListTile(
            title: new Text('Settings'),
            leading: Icon(Icons.settings),
            onTap: (),
          ),
          new ListTile(
            title: new Text('About'),
            leading: Icon(Icons.info_outline),
            onTap: (),
          ),
          new ListTile(
            title: new Text('Logout'),
            leading: Icon(Icons.power_settings_new),
            onTap: ()
                  _googleSignIn.disconnect();
              FirebaseAuth.instance.signOut().then((value) 
                    Navigator.of(context).pushReplacementNamed('/login');
                  ).catchError((e) 
                     print(e);
                  );
            ,
          ),
        ],
      ),
    ),
     body: new Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          padding: EdgeInsets.fromLTRB(50.0, 160.0, 50.0, 0.0),
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
            ],
          ),
        )
      ],
    ),

    );

  

对于我的一些屏幕,我可以毫无问题地声明它。这是home_screen.dart的代码:

    class HomeScreen extends StatefulWidget 
      @override
      HomeScreenState createState() 
        return HomeScreenState();
      
    

    class HomeScreenState extends State<HomeScreen>
    @override
      noSuchMethod(Invocation invocation) 
        return super.noSuchMethod(invocation);
      
    @override
    Widget build(BuildContext context)

      return new KainAppBar("Kain");

      
    

但是,对于我的restaurant_screen.dart,我遇到了一个问题。对于上下文,restaurant_screen.dart所做的是通过带有三个选项(标签)的TabBar显示应用程序中包含的餐馆:餐厅列表,菜单列表和历史记录。这意味着除了AppBar之外,它还需要一个TabBar。但是我不能把这个TabBar放在KainAppBar.dart中,因为我只需要在restaurant_screen.dart里面显示它。

这是我在restaurant_screen.dart中的Widget的代码:

  @override
  Widget build(BuildContext context) 
    return new Column(
      children: <Widget>[
        GradientAppBar(
          title: KainAppBar("Kain"),
          bottom: new TabBar(
            labelColor: Colors.white,
            controller: tController,
            tabs: <Widget>[
              new Tab(text: 'List'),
              new Tab(text: 'Cuisine'),
              new Tab(text: 'Favorites'),
              ],
              ),
              ),
              TabBarView(
                controller: tController,
                children: <Widget>[
                  new firstpage.RestaurantList(),
                  new secondpage.CuisineList(),
                  new thirdpage.RestaurantFavorites(),
                  ],
              ),
      ],
    );
  

运行代码只显示黑屏。这有什么解决方法吗?

答案

让我们有一个像这样的widget.dart

import 'package:flutter/material.dart';

class ReusableWidgets 
  static getAppBar(String title) 
    return AppBar(
      title: Text(title),
    );
  

让我们继续使用这个类来获取所有屏幕中的appbar,如下所示:

import 'package:filter_chip/widgets.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new ReusableWidgets().getAppBar('Hello World'),
        body:  Text(
            'Flutter Demo Home Page'), 
      ),
    );
  

另一答案

这是另一种解决方法。通过这样做,您可以按照自己的方式自定义此appbar。这样,如果继续使用该样式,则不必在每个页面上重新创建它。您可以创建一次并在任何小部件中调用它。

import 'package:flutter/material.dart';

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget 
  final Color backgroundColor = Colors.red;
  final Text title;
  final AppBar appBar;
  final List<Widget> widgets;

  /// you can add more fields that meet your needs

  const BaseAppBar(Key key, this.title, this.appBar, this.widgets)
      : super(key: key);

  @override
  Widget build(BuildContext context) 
    return AppBar(
      title: title,
      backgroundColor: backgroundColor,
      actions: widgets,
    );
  

  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);


在所需页面内实施

@override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: BaseAppBar(
          title: Text('title'),
          appBar: AppBar(),
          widgets: <Widget>[Icon(Icons.more_vert)],
        ),
        body: Container());
  

以上是关于如何在仍然显示Widgets的情况下将我的AppBar放在Flutter中的单独文件中?的主要内容,如果未能解决你的问题,请参考以下文章

如何在没有用户停机的情况下将我的 CloudFront 分配替换为另一个

如何在不包含节点模块文件夹的情况下将我的 React 项目上传到 GitHub [重复]

如何在不使用和拆分测试集的情况下将我的数据集拆分为训练和验证?

如何在不杀死 /health 的情况下将我的 Spring Boot 应用程序默认为 application/xml?

如何在没有私钥的情况下将我的元掩码钱包中的 erc20 代币发送到其他地址?

如何在没有 Index.html 或.php 的情况下将我的 Web 应用程序文件运行到服务器?