当前位置:   article > 正文

flutter第一个项目_flutter gis

flutter gis

关于flutter这么配置环境,这里不多说了,网上很多,参考这个最好:https://flutterchina.club/setup-windows/

1、我们用AndroidStudio 开发,当我们配置完环境,并且在AndroidStudio中已经安装完flutter插件重启之后,就可以创建flutter项目了,刚创建的新项目结构是这样的,

上图中我打码了一个,那个是我后来自己创建的一个图片等资源目录,我创建的结构是这样的

这个命名随意,,不过,我们要想在项目中引用这里面的资源时,还需要很重要的一步,

2、请大家看这个文件:

然后打开它,看下图红色区域的assets:

可以看到assets: 下面有 - assets/images/timg.jpeg    这里默认都被注释掉了,我们需要把注释去掉,然后把我们的所需要的图片资源通过这里引入,才能使用,但是去掉注释需要注意,系统自带的这里去掉注释时,前面默认都带一个空格,我们在去掉注释后,一定要先把这用Shift+tab键全部移到最左边,然后在用tab键一下,向右移动一个位置即可,

我的弄好之后是这样的:

3、我们用flutter时,所写的所有dart代码全部都是在lib文件夹下面,系统自动给我们生成了一个mian.dart文件,直接运行就可以看到相应的效果,这里我简单介绍一下我们常用的两个widget组件:StatelessWidget StatefulWidget

StatelessWidget  是 无状态widget组件,也就是我们常说的,死布局,写好后,不管在任何状态下,它所实现的布局都不会有任何变化,也就是不能改变数字,文字内容等等,flutter官方也建议我们尽量多使用此组件,但是呢,我们的项目中会有很多很多有状态的组件,都会根据服务器数据及时变化相应内容,所以我们还是用第二个组件更多一些。

StatefulWidget 是有状态widget组件,我们经常会根据服务器数据进行动态改变组件上的内容等,这么说应该好理解。

4、项目入口:

系统生成一个mian.dart 也就是程序的主入口,此dart文件有一行代码:

void main() => runApp(MyApp());

这个就是程序的主入口,如果我们想修改在其它文件中,只需要在其它dart文件代码前面加上这个,然后把MyApp()改为我们想运行的widget组件就行了。

5、简单的界面:

  1. import 'package:flutter/material.dart'; //基础组件都需要导入此文件
  2. void main() => runApp(MyApp());
  3. class MyApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. return MaterialApp( // MaterialApp是一个界面的整体Widget,包含整个界面结构
  7. debugShowCheckedModeBanner: false,//是否去掉屏幕右上角debug标签
  8. title: '开源中国',
  9. theme: ThemeData( //这是界面的主题,导航栏,状态栏的背景设置
  10. primaryColor: Colors.blue, //主题颜色
  11. ),
  12. home: Text('Flutter Demo Home Page'), //界面中主要的内容,这里就显示一个文本
  13. );
  14. }
  15. }

直接运行即可看小简单的效果

6、下面说一下flutter项目中添加第三方依赖库的方法:

如图,就是在pubspec.yaml 文件里面上图中红色区域添加上你要使用的第三方库即可

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/码创造者/article/detail/926693
推荐阅读
相关标签
  

闽ICP备14008679号