Flutter 学习笔记 | 第一个程序 |
2019-03-19 本文已影响0人
WnniandaoYu
上一节介绍了环境配置,环境配置好就可以开始创建和运行第一个项目了。
项目创建
IDE插件配置成功会在主界面出现Start a new Flutter project
这一个选项。
点击后会出现创建窗口,选择
Flutter Application
点击Next
按钮。
依次填写
Project name
、SDK Path
、Project location
、Description
后,点击Next
按钮,进行下一步。
填写
Company domain
,以及根据需要在Platform channel language
中勾选对代码的支持,接下来就可以点击Finish
按钮了。
等待Creating Flutter Project
....,第一次的话会等待很长时间,耐心等待....如果太长的话建议在项目目录打开cmd,然后输入flutter create 项目名称
的方式创建。
创建好了之后,Android Studio就会进入一个全新的界面,界面左边会是项目目录,放上目录图片(中间发生了点波折
...所以改名成flutter_one_app
了)。
上图有个main.dart,这个文件里面有个官方的小实例,这是自动生成的。
项目运行
等不及了,直接运行项目,我这用的真机,所以直接走起 ~ Go Go Go
等待漫长的运行过程后,运行出来了,放上图 ~
官方示例项目代码
这是项目创建后,自带的一个官方小实例,功能是点击右下角+号按钮,屏幕中间的数子可以增加。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
温馨提示:未完待续...