前言:
接着上一篇Flutter入门配置环境成功后,进行了第一个例子的实战,步骤如下:
1.打开Android Studio,选择File——New——New Flutter Project,创建Flutter项目
2.选择Flutter Application——Next,点击Next之后填写创建项目的相关信息
3.依次填写项目名、Flutter sdk path(Flutter sdk路径)、Project location(项目存放位置工作空间)、Description(项目简单描述)
4.输入包名后,点击Finish,进行项目构建阶段 ,此时需等待一段时间.
5.项目创建完成之后的目录如下:
6.基本设置:在main.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 辅导', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'flutter实例!'),//设置标题文字 ); } } 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( '你好,flutter',//设置内容 ), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add),//按钮 ), // This trailing comma makes auto-formatting nicer for build methods. ); } }
7.运行出来界面截图如下:
这样一个简单的入门小例子就完成了,后面会慢慢加上其他功能和效果,新手上路,如有问题,敬请谅解!
8.最后附上项目demo地址: