Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程

用后感:Dart很强大!支持编写Server端、移动app端、web端的编程语言,语法简单,只要你掌握了任何一门面向对象的高级编程语言,再来学习Dart,绝对在1小时内全部学会!

目录

  • 1.下载Flutter
  • 2.检测Flutter
  • 3.一个简单的Flutter程序示例
  • 4.sssss

1.下载flutter

直接下载,需要解压缩

https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_2.2.1-stable.zip

通过git

git clone https://github.com/flutter/flutter.git -b stable

配置环境变量,设置一次,关闭Terminal(终端)后,下次还需要设置,所以这是一次性设置。
中间的路径修改成你的flutter解压后/克隆后的目录地址

export PATH="$PATH:/Users/admin/Documents/flutter/bin"

2.整体检测flutter安装及配置是否正确

flutter doctor

macOS上需要安装Xcode、Android Studio两个集成开发工具,如果使用flutter开发web应用,还需要安装Chrome浏览器,如果你没有安装这些,请根据自己需要来。

3.一个简单的Flutter程序示例

flutter create testapp1 

testapp1就是我们的测试项目名称,一定要小写,否则会报错。
当项目创建完毕后,你会看到testapp1目录下的文件结构如下所示:
Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程_第1张图片

  • iOS表示iOS端的项目
  • android表示安卓端的项目
  • web表示web端pc和H5的项目
  • pubspec.yaml 表示flutter的资源和依赖库的管理

所以一个flutter项目是一次开发,三端运行!
然后,cd testapp1目录下,运行此项目

flutter run

选择你想运行的手机,或者模拟器上,

  • 如果你想运行iOS项目,则先打开ios/Runner.xcworkspace项目,设置运行到真机/模拟器上的签名
  • 如果你想运行安卓项目,则先打开android项目,设置相关参数

app运行到真机/模拟器的步骤的教程百度上很多,自行搜索

4.基础Flutter代码编写

在flutter中,所有的东西都是widget(组件),所以,我们先把lib/main.dart文件里的代码删除,然后粘贴以下代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

重新运行项目,看看效果。代码链接
Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程_第2张图片

结构非常简单!

  • 一个main函数,程序入口
  • 一个Flutter app本身就是就一个widget
  • 大部分的widget都有一个build()函数,在build()函数内返回布局和组件
  • MaterialApp是google提供的Material一套UI库的组件
  • 界面上显示的内容都是通过Scaffold组件来布局的

看这篇文章,你就对Dart有了初步的认识了
https://flutter.dev/docs/get-started/codelab
整个布局的树形结构图
Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程_第3张图片
布局的两种方式:

  • Flutter默认的Container的布局
  • 或者使用MaterialApp的布局

所以,类比的话,MaterialApp就有点像iOS里的SnapKit的布局,使用超级简单,而系统自带的,就要写很多代码实现相同功能。





每天都在更新中。。。。。。

参考

1.官方教程macOS
2.DART编程语言中文教程
3.Flutter的widget布局基础教程

你可能感兴趣的:(IOS,flutter,android,flutter,iOS,android,安卓,跨端开发)