Flutter基础-创建第一个Flutter应用

Flutter基础-创建第一个Flutter应用

​来源: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg

作者: The Net NinJa

看完上篇长长的Dart语法介绍，想必大家看的都快坚持不住了，但是只要再坚持一会，胜利就在眼前了。今天和坚持下来的小伙伴们，一起做一件非常有成就感的事情，那就是使用Flutter创建第一个属于自己的应用。毕竟还是希望努力了就有相应的回报嘛。

 

创建项目

这里我们默认大家已经安装好了Flutter，同时电脑上已经安装好了Android Studio，并在Android Studio中安装好Flutter和Dart插件。如果安装过程中出现问题，可以进群和大家一起交流，大家一起帮你解决。

 

那么如何创建属于自己的第一个应用呢？

以Mac电脑上的Android Studio 3.5 为例：

1、 若刚打开Android Studio，选择“Start a new Flutter project”，点击下一步;若已经打开Android Studio，选择File>New>New Flutter Project...;

2、 选择 Flutter Application，点击下一步;

3、 填写合适的Project name，点击下一步，最后点击finish。

 

等待第一个应用环境创建完毕，我们打开lib>main.dart，会发现官方已经帮我们写了一部分代码。我们尝试着运行，看看官方的代码运行后是什么效果。

正常情况下，我们选择打开一个手机模拟器之后，点击运行按钮“run”,界面便可以正常展示。但是在实际操作过程中，偶尔会遇到一些奇奇怪怪的小问题。

我在运行时，遇到了下面两个问题，和大家分享下，以免大家跟我一样踩坑。

 

1. 当我们正常打开一个手机模拟器之后，点击运行按钮，出现以下告警提示。怎么办？

解决方法：

使用命令行执行flutter config –android-sdk 自己的android sdk路径。

 

 

2. flutter 一直卡在 Running Gradle task ‘assembleDebug’怎么办？

因为Gradle的Maven仓库在国外，可以使用阿里云的镜像文件。

解决方法：

第一步: 修改项目中的“android/build.gradle”文件。

repositories {//        google()//        jcenter()        maven { url 'https://maven.aliyun.com/repository/google' }        maven { url 'https://maven.aliyun.com/repository/jcenter' }        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }    }​    dependencies {        classpath 'com.android.tools.build:gradle:3.5.0'        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"    }}​allprojects {    repositories {//        google()//        jcenter()        maven { url 'https://maven.aliyun.com/repository/google' }        maven { url 'https://maven.aliyun.com/repository/jcenter' }        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }    }}

第二步：修改Flutter的配置文件，该文件是“Flutter安装目录/packages/flutter_tools/gradle/flutter.gradle”。

buildscript {    repositories {        //google()        //jcenter()        maven { url 'https://maven.aliyun.com/repository/google' }        maven { url 'https://maven.aliyun.com/repository/jcenter' }        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }    }    dependencies {        classpath 'com.android.tools.build:gradle:3.5.0'    }} 

开始编写代码

当我们运行成功，说明环境一切都准备就绪啦。接下来，我们删除官方默认的代码，编写属于自己的一个小小的应用。

删除main.dart中多余代码，只保留以下部分。

void main() {  runApp(MyApp());}​class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {  }}

编写以下代码：

import 'package:flutter/material.dart';​void main() {  runApp(MyApp());}​class MyApp extends StatelessWidget {  // 这个Widget是你的root Widget  @override  Widget build(BuildContext context) {    //MaterialAPP是我们app开发中常用的符合MaterialAPP Design设计理念的入口Widget    return MaterialApp(      //移动设备使用这个title来表示我们的应用      title: "第一个Flutter应用",​      //主页显示的内容      home: Scaffold(        appBar: AppBar(          title: Text('欢迎来到Flutter'),        ),​        body: Center(          child: RaisedButton(            child: Text('点击'),          )        ),      ),    );  }}

 

选择已存在的手机模拟器并打开，然后点击运行按钮，出现以下界面就代表你已经成功了，正式开启了Flutter 之旅！

 

 

 

作业：创建第一个Flutter 应用

 

学习完成别忘了打卡哦～，大家一起学习交流才更有趣。在下方评论留言 “打卡第*天”，大家互相监督，一起进步吧！

 

亦可加微信：wtr513 备注: "Flutter 技术交流", 进群和大家一起学习。

关注公众号: bsmg513 我们会每周定时更新三篇。

今日推荐文章:

今日无推荐文章，哈哈哈～如果大家在安装插件时遇到困难，欢迎大家进群一起交流,或者在下方留言～