如何减少 Flutter 中抽屉图标旁边的空白？

Question

在我的 Flutter 项目中，我设置了一个自定义抽屉。

这是自定义抽屉的代码-

class AppDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    double defaultScreenWidth = 400.0;
    double defaultScreenHeight = 810.0;

    ScreenUtil.instance = ScreenUtil(
      width: defaultScreenWidth,
      height: defaultScreenHeight,
      allowFontScaling: true,
    )..init(context);
    
    return SizedBox(
      width: MediaQuery.of(context).size.width * 0.70,
      child: Drawer(

        child: Container(
          color: Colors.black87,
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[

              SizedBox(height: ScreenUtil.instance.setHeight(30),),

              _createDrawerItem(
                  icon: Icons.keyboard_arrow_right,
                  text: 'English to Bangla',
                  onTap: () =>
                      Navigator.pushReplacementNamed(context, Routes.englishToBangla)),

              Padding(
                padding:  EdgeInsets.only(left:ScreenUtil.instance.setWidth(20), right: ScreenUtil.instance.setWidth(20)),
                child: Divider(
                  height: ScreenUtil.instance.setHeight(10),
                  color: Colors.grey,
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }


  Widget _createHeader() {
    return DrawerHeader(
        margin: EdgeInsets.zero,
        padding: EdgeInsets.zero,
        decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.fill,
                image:  AssetImage('path/to/header_background.png'))),
        child: Stack(children: <Widget>[
          Positioned(
              bottom: 12.0,
              left: 16.0,
              child: Text("Flutter Step-by-Step",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.w500))),
        ]));
  }



  Widget _createDrawerItem(
      {IconData icon, String text, GestureTapCallback onTap}) {
    return ListTile(
      title: Padding(
        padding: EdgeInsets.only(left: ScreenUtil.instance.setWidth(10)),
        child: Row(
          children: <Widget>[
            Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.teal
                ),
                child: Icon(icon, color: Colors.white,)
            ),
            Padding(
              padding: EdgeInsets.only(left: ScreenUtil.instance.setWidth(10)),
              child: Text(text, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: ScreenUtil.instance.setSp(14) ),),
            )
          ],
        ),
      ),
      onTap: onTap,
    );
  }

}

这是工具栏的代码，显示在抽屉图标旁边-

class SearchAppBar extends StatefulWidget implements PreferredSizeWidget {
  final PatternCallback onPatternSelected;
  SearchAppBar(this.onPatternSelected, {Key key})
      : preferredSize = Size.fromHeight(90),
        super(key: key);

  @override
  final Size preferredSize; // default is 56.0

  @override
  _SearchAppBarState createState() => _SearchAppBarState();
}

class _SearchAppBarState extends State<SearchAppBar> {
  TextEditingController _searchTextController = TextEditingController();


  @override
  Widget build(BuildContext context) {

    double defaultScreenWidth = 400.0;
    double defaultScreenHeight = 810.0;
    ScreenUtil.instance = ScreenUtil(
      width: defaultScreenWidth,
      height: defaultScreenHeight,
      allowFontScaling: true,
    )..init(context);

    return Container(
      color: Colors.white,

      child: Row(
        children: <Widget>[

          Expanded(
            child: Container(

              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(3),

              ),
              child: Theme(
                data:
                Theme.of(context).copyWith(primaryColor: Color(0xFFff9900)),
                child: TextFormField(
                  autofocus: false,
                  style: TextStyle(fontSize: ScreenUtil.instance.setSp(18)),
                  keyboardType: TextInputType.text,
                  controller: _searchTextController,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Search for any word you want',
                    hintStyle:
                    TextStyle(fontSize: ScreenUtil.instance.setSp(16)),
                    contentPadding: EdgeInsets.symmetric(
                        vertical: 14,
                        horizontal: 10),
                  ),
                  onChanged: (String value) {
                    widget.onPatternSelected(value);
                  },
                ),
              ),
            ),



          ),


          Container(

              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(0),
                 ),
              child: InkWell(onTap: (){

                if(_searchTextController.text.isNotEmpty) {
                  Navigator.of(context).push(MaterialPageRoute(builder: (context)=>WordDetailScreen(_searchTextController.text.toLowerCase())));
                }

              },
                  child: Icon(Icons.search, color: Colors.blue,))),

          SizedBox(width: 15)
        ],
      ),
    );
  }
}

然后，在我想使用这个抽屉的课程中，我在下面的 Scaffold 中调用了-

抽屉：AppDrawer()

但问题是这会导致抽屉图标旁边出现空白，如下图-

而且我不知道这些额外的填充或边距是从哪里发生的。所以，我需要一个解决方案来减少抽屉图标旁边的额外空白。

Answer 1

您可以使用Transform.translate 将搜索栏向左移动：

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
            leading: Builder(builder: (context) {
              return IconButton(
                icon: Icon(Icons.menu),
                onPressed: () => Scaffold.of(context).openDrawer(),
              );
            }),
            title: Transform.translate(
                offset: Offset(-30.0, 0.0),
                child: Text('this is the title') // here you can put the search bar
            ),
          ),
      drawer: Drawer(
      ),
    );
}

Answer 2

只需在您的 AppBar 标签中添加一个名为“titleSpacing”的属性，

样本

appBar: AppBar(
    titleSpacing: 0,     //Add this line to your code
    title: Text(widget.title),
    leading: Icon(Icons.android),
    ),