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

登山则情满于山,观海则意溢于海。这篇文章主要讲述Flutter 安卓app web网页电脑桌面软件相关的知识,希望能为你提供帮助。
Flutter 安卓app 、web网页、电脑桌面软件Flutter不但可以做app,还可以做电脑桌面软件、还有web网页等等其他平台系统软件,最近学了一点flutter基础组件,运行试一下了web网页、电脑桌面软件、安卓app,其他平台就不去尝试,因为我的电脑只是Windows系统的 先去下载新版本的androidStudio,官方下载地址:??https://developer.android.google.cn/studio/??

  1. 进入官方页面点下面按钮进行下载:
   
  1. 安装完的AndroidStudio启动页面图片:
  2. 然后新建flutter项目:
??
  1. 新建flutter选择你想要的平台Android、ios、Web、Windows:


     
  1. 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;
});
}
}
}



  1. 下面这个页面是用flutter 做的web网页:
 
  1. 下面这个页面是用flutter 做的Windows电脑桌面软件:

  1. 下面这个页面是用flutter 做的安卓app:

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

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

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

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

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



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


    推荐阅读