美文网首页
Flutter Hello World

Flutter Hello World

作者: zhaovov | 来源:发表于2019-04-06 00:12 被阅读0次

Flutter Hello World

AndroidStudio Flutter Hello World

打开IDEA 选择 Start a new Flutter project

image.png

选择Flutter Application

image.png

Flutter Application 项目文件结构

image.png image.png

Android Studio 对Flutter支持工具简单介绍

image.png

上图1,2,3,4工具按钮介绍

  1. 运行Flutter App的设备列表


    image.png
  2. Flutter的执行入口文件
  3. 正常模式运行Flutter APP
  4. Debug模式运行Flutter APP

Flutter Hello World main.dart源码

import 'package:flutter/material.dart';

//Flutter 运行主函数入口
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(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

//构建一个有状态变化的组件,就是Hello World中所看到的页面
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //声明私有变量counter
  int _counter = 0;

  //声明私有方法 incrementCounter用来增counter的值
  void _incrementCounter() {
    //更新组件状态 counter 增加 1
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  //构建当前页面现实内容
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          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),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Flutter Hello World运行效果

image.png

相关文章

  • Flutter Hello World

    Flutter Hello World AndroidStudio Flutter Hello World 打开I...

  • flutter 笔记 Hello World

    flutter 笔记Hello World

  • Flutter开发 -- [01 - Hello World]

    一. 第一个Flutter代码 1.1. Hello World 1.1.1. Hello World的需求 做任...

  • flutter hello world

    创建第一个项目。由于我使用的vscode 点击debug 然后点击stardebuging。我是mac 于是选择 ...

  • flutter hello world

    在surface pro4上不知道怎么弄好了Flutter了,运行成功在redmi k30 pro手机上了,结果跑...

  • Flutter - Hello World

    对于新学一门语言来说,第一个当然就是“Hello World”了,废话不多说,直接上代码: 下来我们解释下上面的代...

  • Flutter:Hello World 之 StreamCont

    Flutter项目:Hello World 之 StreamController版本 ! 减少页面的build次数...

  • Flutter 之 Hello World

    Window搭建环境 下载并且安装Git 环境变量path添加Flutter的路径,比如: 然后在当前目录执行: ...

  • Flutter--Hello World

    1.Flutter中万物皆Widget之 2.Flutter开发一般嵌套太多,对代码进行抽取如:

  • Flutter hello_world

    今天尝试写第一个Flutter程序,Flutter版的HelloWorld。 首先创建好存放工程的目录,然后使用以...

网友评论

      本文标题:Flutter Hello World

      本文链接:https://www.haomeiwen.com/subject/wdxvvqtx.html