第二章：Hello,Flutter（一）

ZWaruler

已于 2022-03-10 15:49:46 修改

阅读量2.3k

点赞数 1

分类专栏： Flutter-从入门到放弃文章标签： flutter android

于 2022-02-20 15:08:39 首次发布

本文链接：https://blog.csdn.net/u010483016/article/details/123016028

版权

Flutter-从入门到放弃专栏收录该内容

24 篇文章 3 订阅

订阅专栏

Flutter-从入门到放弃(目录,持续更新中)

创建app

开发环境搭建完毕之后，可以进行flutter开发了，创建flutter项目有两种方式：通过IDE创建，通过命令行创建。

flutter create recipes

该命令可以创建一个新的文件夹recipes，并创建同名flutter项目recipes，
通过IDE打开该项目，它跟通过IDE直接创建的项目是一样的。
打开项目后，准备运行时，发现虽然连接上了手机，但是运行按钮前的设备显示为灰色，点击运行没有效果，鼠标点击上去提示 Not applicable for the “main.dart” configuration，后来发现这个提示一直都在，跟这个提示没什么关系。。。
![在这里插入图片描述](https://img-blog.csdnimg.cn/e554333df0b34bea84dba9ac28c9bcb6.png
打开Android Studio的设置 File->Project Structure,发现Project选项下面，没有选择SDK的版本。

选择SDK版本后，重启Android Studio，运行后再次报错：

Gradle 5.6.2 requires Java 8 or later to run. You are currently using Java 7

Gradle和Java的版本不适配，只能降Gradle版本或者升Java版本了。
升Java版本未果后，降Gradle版本为3.0.0.
在这里插入图片描述
我只是想跑个Hello World啊！！！说好的从入门到放弃啊，现在还没入门是个什么情况。。。
度娘后发现又是Java配置的问题，灵光一闪（病急乱投医）后决定用AS来创建项目试试。。。
结果报错 Could not find an option named “platforms”.
我的flutter环境是之前配置的老版本的环境，然后根据别人的经验更新一下flutter试试。

flutter upgrade --force

等待一会后，更新了一些还有一些报错，但是最后终于还是跑起来了。
总结一下，能进行新的环境配置就新配置一下，旧版本的环境可以存在很多问题，尤其是在版本比较旧的情况下
太坎坷了，我觉得把这个界面放上来纪念一下，虽然这个图都是一样的。
在这里插入图片描述

修改APP

新创建的项目是统一的模板样式，我们需要根据项目需求进行修改。

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
......
}

main()是APP启动时的入口，runApp()传入APP的顶级Widget。
我们把MyApp修改为RecipeApp
启动APP后，总是与设备断开连接。。。看到手机上有个无线调试选项，决定试试。
Android Studio真机无线调试
Flutter支持hot reload，但是上面的修改无法使用hot reload。UI上面的一些修改在代码保存后可以立即在设备上反应出来；如果是一些重大的修改，比如上面修改了main() 里的代码，那么就需要使用hot restart来加载新的变化；如果是新增了一些依赖或者资源，那么就需要重新构建APP了。

修改APP的样式

接下来修改一下APP的样式，我们重写一下RecipeApp的build()，在进行这些修改的时候我们可以保存代码，通过hot reload功能立刻看到修改的效果。

//1. build()是widget的入口方法，在该方法内将可以组合其他widget来形成一个新的widget
  @override
  Widget build(BuildContext context) {
    //2. 主题决定了APP的外观样式，默认主题是Material
    final ThemeData theme = ThemeData();
    //3. MaterialApp 使用了 Material Design，并被用来构造RecipeApp
    return MaterialApp(
      //4. 这个title不会显示在UI上，只是设备用来区分APP的一个描述
      title: 'Recipe Calculator',
      //5. 在此更改APP主题颜色
      theme: theme.copyWith(
          colorScheme: theme.colorScheme.copyWith(
        primary: Colors.grey,
        secondary: Colors.black,
      )),
      //6. 使用MyHomePage 类来展示具体的UI，这里的title会展示在APP标题栏上
      home: const MyHomePage(title: 'Recipe Calculator'),
    );
  }

Widget还是那些Widget，但是样式已经不同了：
在这里插入图片描述
接下来我们会继续修改原有代码，来实现自己的需求。