本头条核心宗旨

欢迎来到技术刚刚好头条，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本篇文章中心思想

上篇文章Flutter程序员 实现跨平台 android iOS APP首页底部操作实现方式。介绍了Flutter 底部按钮实现的方式，IOS的效果，今天来讲讲第二种实现方式。BottomNavigationBar的用法。本文代码可以直接复用，复制文中代码直接运行，每一行代码都是「技术刚刚好」验证过的，放心使用。

目前头条的代码格式确实不太好，有部分给我反应看起很恶心，今天我来试试图片的代码，看看效果如何。

BottomNavigationBar用法效果展示

项目用到的API。StatelessWidgetFlutter中的StatelessWidget是一个不需要状态更改的widget - 它没有要管理的内部状态。当您描述的用户界面部分不依赖于对象本身中的配置信息以及widget的BuildContext 时，无状态widget非常有用。

Scaffold是Root Widget- MaterialApp的脚手架。封装了Material Design App会用到的AppBar，Drawer，SnackBar，BottomNavigationBar等。BottomNavigationBarType有fixed 和shifting两种样式，超过3个才会有区别，一般为了体验一致，我们会用fixed type。

Text是文本显示组件，主要显示文字，可以控制文字的样式，大小，颜色等信息。

具体的代码如下图

展示了3个页面的逻辑，主要修改了AppBar的标题消息。

下图主要这哪是了底部按钮的关键代码。

给Flutter添加一个Bottom Navigation Bar Android ios 跨平台

总结

今天就实现这些了，后续继续更新其他的实现方式。学习是一件很累的事情，边学习边整理也是一种提升自己的方式，我相信能坚持下来，谢谢大家。

谢谢观看技术刚刚好头条文章，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。