第一天学习 Flutter

2019-04-24  本文已影响0人  Victory_886

Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。Flutter 兼容现有的代码,免费并且开源,在全球开发者中广泛被使用。
关于Flutter更多的来源以及相关介绍不在这里解释啦,想了解的自己去官网阅读吧。

官方API文档
中文

开始我的笔记

安装 (mac版本)

使用以下命令:

 都在根目录下运行就行
 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
/// 这个是下载flutter SDK 也可以不用写到这里面。
/// git clone -b dev https://github.com/flutter/flutter.git

 /// 先输出一下pwd的路径
 export PATH="$PWD/flutter/bin:$PATH"
 cd ./flutter
 flutter doctor

配置(VSCode)

先下载好VSCode 然后安装两个插件就可以了
首先安装Flutter,它会连带安装Dart
通过运行以下命令来创建一个新的 Flutter 应用:

 flutter create my_app

上述命令创建了一个 my_app 的目录,包含了 Flutter 初始的应用模版,切换路径到这个目录内:

cd my_app

确保模拟器已经处于运行状态,输入以下命令来启动应用:

 flutter run

到这里都OK的话你就是成功了,但是到这里之前都什么遇到一些各种各样的问题的,根据你的问题在网上查找基本都能找到解决的方法的别灰心加油。
反过来说成功了得话应该是看到模拟器上的效果了
能在模拟器上看到效果的朋友说明Flutter的安装配置完全成功了
接下来就是学习了。

推荐大家使用vscode去写代码
vscode下载地址

开始编写Flutter代码

开始编写之前要记得Flutter 一切皆组件。
第一行要导入Flutter的material.dart

import 'package:flutter/material.dart';

/// 定义一个main方法
void main() => runApp(MyApp());

/// 实现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", /// 标题内容
            style: TextStyle( /// 对标题设置样式
              fontSize: 30.0, /// 这里就只写了一个还有很多的样式
            ), /// 注意:结尾都加一个逗号
          ),
        ),
        body:Center(  /// 内容区域为屏幕的中间
          child: Text("Hello World", /// 放了一个文本
            textAlign: TextAlign.left, /// 文本内容
            maxLines: 2,  /// 最大的行数 默认为1
            overflow: TextOverflow.ellipsis, /// 内容超出部分的处理
            style: TextStyle( /// 添加样式
              fontSize: 30.0,
              color: Color.fromARGB(255, 255, 100, 100),
              decoration: TextDecoration.underline, /// 添加下划线
              decorationStyle: TextDecorationStyle.wavy /// 下划线的样式

            ),
          ),
        ),
      ),
    );
  }
}

运行出来的效果:


Simulator Screen Shot - iPhone Xʀ - 2019-04-24 at 00.14.37.png

到这里我的flutter就可以运行成功了,希望您也能安装成功哦~~
加油哦~~

上一篇下一篇

猜你喜欢

热点阅读