Flutter 安卓app web网页电脑桌面软件

Posted 2021-11-21 鹭明

Flutter 安卓app 、web网页、电脑桌面软件

Flutter不但可以做app，还可以做电脑桌面软件、还有web网页等等其他平台系统软件，最近学了一点flutter基础组件，运行试一下了web网页、电脑桌面软件、安卓app，其他平台就不去尝试，因为我的电脑只是Windows系统的

先去下载新版本的androidStudio，官方下载地址：​​https://developer.android.google.cn/studio/​​

1. 进入官方页面点下面按钮进行下载：

   

2. 安装完的AndroidStudio启动页面图片：
3. 然后新建flutter项目：

​ ​

4. 新建flutter选择你想要的平台Android、ios、Web、Windows：

    

5. flutter用dart语言写的底部导航栏四个按钮切换页面代码：

class _IndexState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: "首页",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message),
      label: "消息",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.shopping_cart),
      label: "购物车",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: "个人中心",
    ),
  ];

  int currentIndex=0;

  final pages = [ Home(),Message(), Book(), Person()];/*底部导航栏四个按钮点击要跳到的对应四个界面*/

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          _changePage(index);
       },
      ),
      body: pages[currentIndex],
    );
  }

  /*切换页面*/
  void _changePage(int index) {
    /*如果点击的导航项不是当前项  切换 */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }
}

6. 下面这个页面是用flutter 做的web网页：

 

7. 下面这个页面是用flutter 做的Windows电脑桌面软件：

8. 下面这个页面是用flutter 做的安卓app：

9. 这个是用AndroidStudio查看当前这个页面layout布局结构，所包含的正在使用的组件及属性位置，大小等等

10. 这个是直接查看正在使用的是什么样的模拟器

11. 这个直接查看网络请求接口返回的给组件设置的数据内容

12. 这是线上网络请求给对应组件的数据内容绘制在模拟器app对应页面上

13. 这是flutter devtools线上调试工具可以查看当前页面布局结构，控制台日志、cpu情况、网络情况、app大小等等