1.Flutter打卡-Hello World

       针对原生开发和混合开发的优缺点,咱也不多说了,总的来说,就是牺牲一部分性能,然后适应各大平台,想了解原生开发和混合开发的区别以及各大混合开发具体区别的,可以在https://book.flutterchina.club/chapter1/mobile_development_intro.html了解一下,这里就不做过多介绍。下面开始Hello world。

        关于flutter的安装教程,请移步https://book.flutterchina.club/chapter1/install_flutter.html

第一步:新建工程

1.Create New Flutter Project,选择Flutter Application


图1-1 创建项目 

2.点击next,进入项目配置页面,Project name填写Hello world!注意,项目名称只能由小写字母,数字,下划线组成,第一个字符必须是小写字母,最后一个不能为下划线


图1-2 设置项目属性

3.点击Next 设置包名


图1-3 设置包名

4.点击Finish完成项目的创建。


图1-4 项目创建完成

5.运行项目查看效果,运行结果如图1-5所示,对于项目的具体解析,可以查看https://book.flutterchina.club/chapter2/first_flutter_app.html


图1-5 默认程序运行结果

6.清空main.dart中所有的代码,开始编写我们自己的Hello world!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyAppextends StatelessWidget {

@override

  Widgetbuild(BuildContext context) {

return MaterialApp(

title:'Flutter Demo',

      theme:ThemeData(

primarySwatch: Colors.blue,

      ),

      home:Scaffold(

appBar:AppBar(

title:Text("Welcome to Flutter"),

        ),

        body:Center(

child:Text("Hello world!"),

        ),

      )

);

  }

}

7.进行调试,查看运行结果


图1-6 点击绿色三角块,运行程序


图1-7 Hello world运行结果

        到这里位置,完成了我们的第一个Flutter程序的编写,学习Flutter迈出了人生中的第一大步。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容