【问题标题】:Flutter - how remove padding from BottomNavigationBar?Flutter - 如何从 BottomNavigationBar 中删除填充?
【发布时间】:2021-02-18 07:15:31
【问题描述】:

我在 Flutter 应用中使用了 BottomNavigationBar。我对外观有额外的要求,这是我得到的结果。一切都很好,除了顶部和底部的填充(图中的箭头)。

这是我的代码:

BottomNavigationBar(
    selectedFontSize: 0,
    type: BottomNavigationBarType.fixed,
    currentIndex: currIndex,
    items: tabs.map((e) {
      return BottomNavigationBarItem(
          title: SizedBox.shrink(),
          icon: _buildIcon(e),
      );
    }).toList(),
  )
  
  
Widget _buildIcon(Data data) {

return Container(
  width: double.infinity,
  height:kBottomNavigationBarHeight ,
  child: Material(
    color:  _getBackgroundColor(data.index),
    child: InkWell(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.email_outlined),
         
          Text('111', style: TextStyle(fontSize: 12, color: Colors.white)),
        ],
      ),
      onTap: () {
        onTabSelected(data.index);
      },
    ),
  ),
);
}    

我怎样才能删除那些顶部和底部的填充?任何想法我都会非常感激。

【问题讨论】:

    标签: flutter dart flutter-layout


    【解决方案1】:

    我使用您的零件代码制作了一个示例代码。

    但我无法重现您共享代码的问题。
    您能否分享部分 Scaffold 的 bottomNavigationBar 或其他相关代码。

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.display1,
                  ),
                ],
              ),
            ),
            bottomNavigationBar: BottomNavigationBar(
                selectedFontSize: 0,
                type: BottomNavigationBarType.fixed,
                currentIndex: 0,
                items: [
                  new BottomNavigationBarItem(
                    icon: _buildIcon(),
                    title: SizedBox.shrink(),
                  ),
                  new BottomNavigationBarItem(
                    icon: _buildIcon(),
                    title: SizedBox.shrink(),
                  ),
                  new BottomNavigationBarItem(
                    icon: _buildIcon(),
                    title: SizedBox.shrink(),
                  )
                ]));
      }
    
      Widget _buildIcon() {
        return Container(
          width: double.infinity,
          height: kBottomNavigationBarHeight,
          child: Material(
            color: Colors.grey,
            child: InkWell(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.email_outlined),
                  Text('111', style: TextStyle(fontSize: 12, color: Colors.white)),
                ],
              ),
              onTap: () {},
            ),
          ),
        );
      }
    }
    

    【讨论】:

    • 谢谢。我尝试了不同的选项,但是......我认为关键是 selectedFontSize: 0,
    猜你喜欢
    • 2020-11-08
    • 2022-11-15
    • 2020-03-11
    • 2018-10-27
    • 1970-01-01
    • 2023-04-04
    • 2021-05-23
    • 1970-01-01
    • 2017-04-16
    相关资源
    最近更新 更多