Flutter 学习笔记 | 第一个程序 |

2019-03-19  本文已影响0人  WnniandaoYu

上一节介绍了环境配置,环境配置好就可以开始创建和运行第一个项目了。

项目创建

 IDE插件配置成功会在主界面出现Start a new Flutter project这一个选项。


 点击后会出现创建窗口,选择Flutter Application点击Next按钮。
 依次填写 Project nameSDK PathProject locationDescription 后,点击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),
      ),
    );
  }
}

温馨提示:未完待续...

上一篇下一篇

猜你喜欢

热点阅读