flutter第一个项目

关于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、简单的界面：

import 'package:flutter/material.dart';  //基础组件都需要导入此文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp( // MaterialApp是一个界面的整体Widget，包含整个界面结构
      debugShowCheckedModeBanner: false,//是否去掉屏幕右上角debug标签
      title: '开源中国',
      theme: ThemeData( //这是界面的主题，导航栏，状态栏的背景设置
        primaryColor: Colors.blue, //主题颜色
      ),
      home: Text('Flutter Demo Home Page'), //界面中主要的内容，这里就显示一个文本
    );
  }
}

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

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

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

猜你喜欢