美文网首页
第一天学习 Flutter

第一天学习 Flutter

作者: Victory_886 | 来源:发表于2019-04-24 00:16 被阅读0次

    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就可以运行成功了,希望您也能安装成功哦~~
    加油哦~~

    相关文章

      网友评论

          本文标题:第一天学习 Flutter

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