Flutter Drawer - 无法编辑颜色

问题描述

我对 Flutter 比较陌生，每天都在学习，但是我的抽屉碰壁了。我以前使用过抽屉，并在线查看了过去的代码和示例，但这些抽屉包含了我过去未使用过的几个设计因素。抽屉代码中有这么多“层”，我无法找到正确的位置/方法来更改颜色和不透明度。

抽屉按编码（打开/关闭）工作，字体/图标正确。这是我无法更改/编辑的抽屉标题和主体的背景颜色/不透明度。

任何帮助或建议将不胜感激。我的代码可能一团糟且充满问题，因此有关这方面的建议对我的学习曲线也有很大帮助:)

[main.dart]

import 'package:Flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:welakaone/drawer/drawer.dart';
import 'package:welakaone/drawer/end_drawer.dart';
import 'package:welakaone/screens/screen_1.dart';
import 'package:welakaone/screens/screen_2.dart';
import 'package:welakaone/screens/screen_3.dart';
import 'package:welakaone/screens/screen_4.dart';
import 'package:welakaone/screens/screen_5.dart';
import 'package:welakaone/screens/screen_6.dart';

void main() => runApp(
      MaterialApp(
        // turns off the demo/debug banner on top right of screen
        debugShowCheckedModeBanner: false,home: BottomNavBar(),),);

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _pageIndex = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  List pages = [
    MyRoute(
      iconData: Icons.home,page: Page1(),MyRoute(
      iconData: Icons.calendar_today,page: Page2(),MyRoute(
      iconData: Icons.person,page: Page3(),MyRoute(
      iconData: Icons.message_rounded,page: Page4(),MyRoute(
      iconData: Icons.wash_rounded,page: Page5(),MyRoute(
      iconData: Icons.construction,page: Page6(),];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Below makes the text above title white (=dark) or black (=light)
        brightness: Brightness.dark,title: Text('WelakaOne'),// Below makes the AppBar background a desired color
        backgroundColor: Color(0xff4367b1),leading: Builder(
          builder: (context) {
            return IconButton(
              icon: Icon(Icons.settings),onpressed: () {
                Scaffold.of(context).openDrawer();
              },);
          },actions: <Widget>[
          Builder(
            builder: (context) {
              return IconButton(
                icon: Icon(Icons.person),onpressed: () {
                  Scaffold.of(context).openEndDrawer();
                },);
            },)
        ],drawer: new MyDrawer(),endDrawer: new MyEndDrawer(),bottomNavigationBar: CurvednavigationBar(
        key: _bottomNavigationKey,index: 0,height: 60.0,items: pages
            .map(
              (p) => Icon(
                p.iconData,size: 30,color: Colors.white,)
            .toList(),color: Color(0xff4367b1),buttonBackgroundColor: Color(0xff4367b1),backgroundColor: Colors.white,animationCurve: Curves.easeInOut,animationDuration: Duration(milliseconds: 500),onTap: (index) {
          setState(
            () {
              _pageIndex = index;
            },);
        },body: pages[_pageIndex].page,);
  }
}

class MyRoute {
  final IconData iconData;
  final Widget page;

  MyRoute({this.iconData,this.page});
}

[drawer.dart]

import 'package:Flutter/material.dart';
import 'dart:ui';

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 80),child: ClipRRect(
        borderRadius: BorderRadius.only(
          bottomright: Radius.circular(250),child: SizedBox(
          width: 250,child: Drawer(
            child: new ListView(
              children: <Widget>[
                new UserAccountsDrawerHeader(
                  //Color(0xff4367b1)
                  decoration: Boxdecoration(
                    color: Colors.blue,accountName: new Text(
                    '',style: TextStyle(
                      fontSize: 1,fontWeight: FontWeight.w800,//color: Colors.grey[300],color: Colors.black,accountEmail: new Text(
                    'Modify Experiance',style: TextStyle(
                      fontSize: 18,new ListTile(
                  title: new Text(
                    'News (gen set)',style: TextStyle(
                      fontSize: 16.0,fontWeight: FontWeight.w600,onTap: () {
                    // Update the state of the app
                    // ...
                    // Then close the drawer
                    Navigator.pop(context);
                  },leading: new Icon(
                    Icons.add_to_home_screen,size: 26.0,new ListTile(
                  title: new Text(
                    'Color & Design',leading: new Icon(
                    Icons.notifications,new ListTile(
                  title: new Text(
                    'Social Media',leading: new Icon(
                    Icons.message,new ListTile(
                  title: new Text(
                    'Login Options',leading: new Icon(
                    Icons.touch_app,new Divider(
                  color: Colors.black38,new ListTile(
                  title: new Text(
                    'Close Menu',leading: new Icon(
                    Icons.close,],);
  }
}

[end_drawer.dart]

import 'package:Flutter/material.dart';

class MyEndDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 80),child: ClipRRect(
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(250),child: Drawer(
            child: new ListView(
              children: <Widget>[
                new UserAccountsDrawerHeader(
                  accountName: new Text(
                    '',accountEmail: new Text(
                    'Account Settings',new ListTile(
                  title: new Text(
                    'Profile & Security',leading: new Icon(
                    Icons.person,new ListTile(
                  title: new Text(
                    'Notifications',new ListTile(
                  title: new Text(
                    'Favorites',leading: new Icon(
                    Icons.favorite,new ListTile(
                  title: new Text(
                    'About WelakaOne',onTap: () {
                    //Navigator.pushReplacementNamed(context,Routes.about);
                    //Navigator.popAndPushNamed(context,Routes.app1);
                  },leading: new Icon(
                    Icons.info_outline,new ListTile(
                  title: new Text(
                    'Log Out & Exit',onTap: () {
                    Navigator.pop(context);
                  },leading: new Icon(
                    Icons.exit_to_app,);
  }
}

解决方法

您可以通过更改 main.dart 中 ThemeData 中的 canvasColor 来更改抽屉的背景颜色：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: YourHomeWidget(),theme: ThemeData.light().copyWith(
      canvasColor: Colors.grey,),));
}