如何在flutter应用中实现应用栏通用化

zdwk9cvp  于 2023-01-18  发布在  Flutter
关注(0)|答案(5)|浏览(115)

我在flutter应用中创建了一个AppBar，但我想让它通用（也就是说，我希望在应用的大多数屏幕中使用相同的AppBar）。我创建了一个新的dart文件，其中包含一个StatefulWidget，我将其命名为AppBarscreen，然后返回了一个AppBar小部件。当我试图调用另一个文件中的小部件时，我收到了如下错误：
[！[我在它下面画了这些红线][1]][1]
下面是我创建的AppBarscreen类的代码：

import 'package:flutter/material.dart';

class AppBarScreen extends StatefulWidget {
  const AppBarScreen({super.key});

  @override
  State<AppBarScreen> createState() => _AppBarScreenState();
}

class _AppBarScreenState extends State<AppBarScreen> {
  final GlobalKey<ScaffoldState> scaffoldkey = new GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return AppBar(
      iconTheme: IconThemeData(color: Colors.black),
      toolbarHeight: 70,
      elevation: 0.0,
      backgroundColor: Color(0xFFE5E5E5),
      actions: [
        SizedBox(
          width: 10,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                height: 50,
                width: 80,

          ],
        ),
        SizedBox(
          width: 90,
        ),
        Image.asset(
          "lib/assets/activity.png",
          height: 30,
          width: 30,
        ),
        SizedBox(
          width: 15,
        ),
        Image.asset(
          "lib/assets/notification-bing.png",
          height: 30,
          width: 30,
        ),
        SizedBox(
          width: 10,
        ),
        CircleAvatar(
          child: Icon(
            Icons.person,
            color: Colors.grey,
          ),
          backgroundColor: Colors.grey[300],
        ),
        SizedBox(
          width: 10,
        ),
      ],
      leadingWidth: 100,
      leading: GestureDetector(
        onTap: () => scaffoldkey.currentState!.openDrawer(),
        child: Row(
          children: [
            SizedBox(width: 20),
            Icon(Icons.menu, color: Colors.black),
          ],
        ),
      ),
    );
  }
}

这是我调用AppBarscreen小部件的屏幕代码：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
final GlobalKey<ScaffoldState> scaffoldkey = new GlobalKey<ScaffoldState>();
  final user = FirebaseAuth.instance.currentUser;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        key: scaffoldkey,
        drawer: SideMenu(),
        backgroundColor: Color(0xFFE5E5E5),
        appBar: AppBarScreen(),
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
          child: SingleChildScrollView(
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Dashboard",
                    style: TextStyle(fontSize: 35, letterSpacing: 0.2),
                  ),
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(8, 10, 15, 10),
                      child: Icon(
                        Icons.history,
                        size: 30,
                        color: Colors.green,
                      ),
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.green, width: 2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  )
                ],
              ),
              Row(
                children: [
                  Text(
                    "How are you today?",
                    style: TextStyle(fontSize: 18),
                  ),
                  Image.asset(
                    "lib/assets/goodbye.png",
                    height: 20,
                  ),
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                height: 140,
                child: PageView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                        title: "Revenue",
                        rate: 0,
                        icon: "lib/assets/moneyrounded.png",
                        balance: 0,
                        color: Colors.green,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                          title: "Total Orders",
                          rate: 0,
                          icon: "lib/assets/clipboard2.png",
                          balance: 0,
                          color: Colors.blue),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                          title: "Total Products",
                          rate: 0,
                          icon: "lib/assets/box.png",
                          balance: 0,
                          color: Colors.orange),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 30,
              ),
              //sales info card
              SalesInfo(),
              SizedBox(
                height: 50,
              ),
              //product info card
              ProductInfo(),
              SizedBox(
                height: 50,
              ),

              //expiry info card
              ExpiryInfo(),
              SizedBox(
                height: 50,
              ),

              //transaction card
              TransactionsCard(),
              SizedBox(
                height: 30,
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

请问我怎样才能消除这个错误？

flutter

5条答案

按热度按时间
uqzxnwby

uqzxnwby1#

这是AppbarScreeen的完整代码：

import 'package:flutter/material.dart';
    
    class AppBarScreen extends StatefulWidget {
      const AppBarScreen({super.key});
    
      @override
      State<AppBarScreen> createState() => _AppBarScreenState();
    }
    
    class _AppBarScreenState extends State<AppBarScreen> {
      final GlobalKey<ScaffoldState> scaffoldkey = new GlobalKey<ScaffoldState>();
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
          iconTheme: IconThemeData(color: Colors.black),
          toolbarHeight: 70,
          elevation: 0.0,
          backgroundColor: Color(0xFFE5E5E5),
          actions: [
            SizedBox(
              width: 10,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                    height: 50,
                    width: 80,
                    child: Image.asset("lib/assets/custigrow.png")),
              ],
            ),
            SizedBox(
              width: 90,
            ),
            Image.asset(
              "lib/assets/activity.png",
              height: 30,
              width: 30,
            ),
            SizedBox(
              width: 15,
            ),
            Image.asset(
              "lib/assets/notification-bing.png",
              height: 30,
              width: 30,
            ),
            SizedBox(
              width: 10,
            ),
            CircleAvatar(
              child: Icon(
                Icons.person,
                color: Colors.grey,
              ),
              backgroundColor: Colors.grey[300],
            ),
            SizedBox(
              width: 10,
            ),
          ],
          leadingWidth: 100,
          leading: GestureDetector(
            onTap: () => scaffoldkey.currentStat?.openDrawer(),
            child: Row(
              children: [
                SizedBox(width: 20),
                Icon(Icons.menu, color: Colors.black),
              ],
            ),
          ),
        ));
      }
    }

这是要使用appbarscreen类的地方

import 'package:custigrow/Utilities/app_bar.dart';
import 'package:custigrow/Utilities/expiry_information_card.dart';
import 'package:custigrow/Utilities/my_cards.dart';
import 'package:custigrow/Utilities/product_information_card.dart';
import 'package:custigrow/Utilities/sales_information_card.dart';
import 'package:custigrow/Utilities/transactions_card.dart';
import 'package:custigrow/screens/authenticate/sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:custigrow/Utilities/side_menu.dart';

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
final GlobalKey<ScaffoldState> scaffoldkey = new GlobalKey<ScaffoldState>();
  final user = FirebaseAuth.instance.currentUser;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        key: scaffoldkey,
        drawer: SideMenu(),
        backgroundColor: Color(0xFFE5E5E5),
         appBar: PreferredSize(
              preferredSize: Size.fromHeight(120), child: AppBarScreen()),
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
          child: SingleChildScrollView(
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Dashboard",
                    style: TextStyle(fontSize: 35, letterSpacing: 0.2),
                  ),
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(8, 10, 15, 10),
                      child: Icon(
                        Icons.history,
                        size: 30,
                        color: Colors.green,
                      ),
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.green, width: 2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  )
                ],
              ),
              Row(
                children: [
                  Text(
                    "How are you today?",
                    style: TextStyle(fontSize: 18),
                  ),
                  Image.asset(
                    "lib/assets/goodbye.png",
                    height: 20,
                  ),
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                height: 140,
                child: PageView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                        title: "Revenue",
                        rate: 0,
                        icon: "lib/assets/moneyrounded.png",
                        balance: 0,
                        color: Colors.green,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                          title: "Total Orders",
                          rate: 0,
                          icon: "lib/assets/clipboard2.png",
                          balance: 0,
                          color: Colors.blue),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                          title: "Total Products",
                          rate: 0,
                          icon: "lib/assets/box.png",
                          balance: 0,
                          color: Colors.orange),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 30,
              ),
              //sales info card
              SalesInfo(),
              SizedBox(
                height: 50,
              ),
              //product info card
              ProductInfo(),
              SizedBox(
                height: 50,
              ),

              //expiry info card
              ExpiryInfo(),
              SizedBox(
                height: 50,
              ),

              //transaction card
              TransactionsCard(),
              SizedBox(
                height: 30,
              ),
            ]),
          ),
        ),
      ),
    );
  }
}
赞(0）分享  回复(0）举报  2023-01-18
yqkkidmi

yqkkidmi2#

为它创建一个方法，你可以在每个屏幕示例代码中使用它。

AppBar newMethod() {
return AppBar(
  iconTheme: IconThemeData(color: Colors.black),
  toolbarHeight: 70,
  elevation: 0.0,
  backgroundColor: Color(0xFFE5E5E5),
  actions: [
    SizedBox(
      width: 10,
    ),
    Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
            height: 50,
            width: 80,
            child: Image.asset("lib/assets/custigrow.png")),
      ],
    ),
    SizedBox(
      width: 90,
    ),
    Image.asset(
      "lib/assets/activity.png",
      height: 30,
      width: 30,
    ),
    SizedBox(
      width: 15,
    ),
    Image.asset(
      "lib/assets/notification-bing.png",
      height: 30,
      width: 30,
    ),
    SizedBox(
      width: 10,
    ),
    CircleAvatar(
      child: Icon(
        Icons.person,
        color: Colors.grey,
      ),
      backgroundColor: Colors.grey[300],
    ),
    SizedBox(
      width: 10,
    ),
  ],
  leadingWidth: 100,
  leading: GestureDetector(
    onTap: () => scaffoldkey.currentState!.openDrawer(),
    child: Row(
      children: [
        SizedBox(width: 20),
        Icon(Icons.menu, color: Colors.black),
      ],
    ),
  ),
);
}
赞(0）分享  回复(0）举报  2023-01-18
z9gpfhce

z9gpfhce3#

无论您在appBar中放入什么，都需要实现PreferredSizeWidget。
例如，您可以更改AppBarScreen以使其正常工作

class AppBarScreen extends StatefulWidget implements PreferredSizeWidget {
  const AppBarScreen({super.key});

  @override
  State<AppBarScreen> createState() => _AppBarScreenState();

  Size get preferredSize => Size.fromHeight(70);
}
赞(0）分享  回复(0）举报  2023-01-18
kokeuurv

kokeuurv4#

创建一个将在其中实现AppBar的ParentContainer。

class ParentContainer extends StatelessWidget {
  final bool isShowLeading;
  final String title;
  final String toolTip;
  final Widget action;
  final VoidCallback callback;
  final Function onAction;
  final Widget body;
  final int walletBalance;

  ParentContainer({
    this.title,
    this.action,
    this.onAction,
    this.toolTip,
    this.callback,
    this.walletBalance,
    this.isShowLeading = false,
    @required this.body,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // key: _scaffoldKey,
        resizeToAvoidBottomInset: false,
        backgroundColor: AppColor.appWhite,
        appBar: AppBar(
          elevation: 0,
          toolbarHeight: 0,
          leading: new IconButton(
            icon: new Icon(
              Icons.arrow_back,
              color: AppColor.appBrightBlue,
            ),
            onPressed: () => Navigator.of(context).pop(),
          ),
          title: Text(
            title != null ? title : "",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
                fontSize: 20,
                color: AppColor.appBrightBlue,
                fontWeight: FontWeight.bold),
          ),
          backgroundColor: AppColor.appPrimaryColor,
          centerTitle: false,
          actions: <Widget>[action != null ? action : Container()],
        ),
        body: body);
  }
}

并将该类称为每个类中的顶级小部件。

Widget build(BuildContext context) {
 return ParentContainer(
  title: "Discounts",
  isShowLeading: true,
  body:ListView()
   ...
   ....
}
赞(0）分享  回复(0）举报  2023-01-18
pzfprimi

pzfprimi5#

How can I have my AppBar in a separate file in Flutter while still having the Widgets show?
因此，在可重用的应用程序栏上，类实现PreferredSizeWidget并重写
@override大小获取首选大小=〉新大小.从高度（appBar.首选大小.高度）;
然后你就可以访问。

赞(0）分享  回复(0）举报  2023-01-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com