flutter学习笔记（一）慕课技术胖老师听课笔记

2-5写一个HelloWorld程序

Flutter upgrade:cmd控制台中运行Flutter upgrade，升级flutterSDK
Flutter doctor 查看flutterSDK版本
flutter中的快捷键
r：点击后热加载，直接查看预览效果
p：在虚拟机中显示网格
o：切换Android和iOS的预览模式
q：退出调试预览模式

//谷歌推出的扁平化样式 大气美观
import 'package:flutter/material.dart';
//入口文件
void main() => runApp(MyApp());
//定义MyApp函数 继承静态的组件
class MyApp extends StatelessWidget {
//  重写build方法
  @override
//  返回一个组件 传递一个上下文
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "welcome to flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello Worldtitle"),
        ),
        body: new Center(
          child: new Text("Hello Worldbody"),
        ),
      ),
    );
  }
}

3-1节TextWidget文本组件

import 'package:flutter/material.dart';

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

//静态组建
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(
        appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Text(
          'Flutter一切皆组件。Flutter一切皆组件。Flutter一切皆组件。Flutter一切皆组件。Flutter一切皆组件。',
//                居中对齐 left right start end(后两个工作不常用 和left right类似 运行效果差不多)
          textAlign: TextAlign.center,
//              最大行数
          maxLines: 1,
//              默认值 直接把文本截断
//              overflow: TextOverflow.clip,
//            超出省略号 fade不常用 逐行颜色透明度减淡
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
              fontSize: 25.0,
              color: Color.fromARGB(255, 255, 150, 150),
//                  下划线实线
              decorationStyle: TextDecorationStyle.solid,
              decoration: TextDecoration.underline),
        )),
      ),
    );
  }
}

3-2节ContainerWidget容器组件-1

import 'package:flutter/material.dart';

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

//静态组建
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(
        appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Container(
          child: new Text(
            'Hello Imooc',
            style: TextStyle(fontSize: 40.0),
          ),
//          底部居左对齐 第一个值为垂直方向 第二个值为水平方向
//          alignment: Alignment.bottomLeft,
          //          垂直居中水平向左对齐
          alignment: Alignment.centerLeft,
//          宽高颜色
          width: 500.0,
          height: 400.0,
          color: Colors.lightBlue,
        )),
      ),
    );
  }
}

3-3节 ContainerWidget容器组件-2

import 'package:flutter/material.dart';

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

//静态组建
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(
        appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Container(
          child: new Text(
            'Hello Imooc',
            style: TextStyle(fontSize: 40.0),
          ),
          alignment: Alignment.bottomLeft,
          width: 500.0,
          height: 400.0,

//              内边距20
//              padding:const EdgeInsets.all(20.0),
//            分别设置上下左右的边距
          padding: const EdgeInsets.fromLTRB(10.0, 0, 0, 59.0),
//              外边距
          margin: const EdgeInsets.all(10.0),
          decoration: new BoxDecoration(
            gradient: const LinearGradient(
                colors: [Colors.lightGreen, Colors.purple, Colors.amber]),
          ),
        )),
      ),
    );
  }
}