记录flutter的学习

第一次学习flutter

搜索flutter进入flutter的官网，选择你的操作系统，进入flutter官网.
我的是windows的操作系统 首先安装flutter，再次安装android studio，我在配置模拟器的时候出现了显卡的问题，笔记本电脑一般不会出现这种问题。其次出现了Error connecting to the service protocol: HttpException: Connection closed before full header was received, uri = http://127.0.0.1:63924/UtlsijZOsPU=/ws 这个是由于安卓版本太高的原因，把版本改为8.1的就可以了，还有一个终极大招就是用真机测试，不用这么麻烦了。
最后选择的编辑器是vscode，下载一个flutter的插件，然后运行flutter run ,由于我的是真机测试的，首先要先看下链接的手机版本flutter devices,之后再flutter run就可以在手机上运行起来了

用flutter写一个Hello World

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
//声明MyApp类
class MyApp extends StatelessWidget {
  //重写build方法
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '欢迎使用flutter',
      home: Scaffold(
          appBar: AppBar(title: Text('welcome to flutter')),
          body: Center(
            child: Text('Hello World'),
          )),
    );
  }
}

使用Text

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
//声明MyApp类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '欢迎使用flutter',
      home: Scaffold(
          appBar: AppBar(title: Text('welcome to flutter')),
          body: Center(
            child: Text(
              '大家好，这是我第一次学习flutter,感觉挺不错的,希望可以坚持下去', //文字的显示
              textAlign: TextAlign.center, //文字对齐方式
              maxLines: 1, //显示的行数
              overflow: TextOverflow.ellipsis, //ellipsis 以...的形式
              style: TextStyle(
                  fontSize: 22.0, //文字的大小
                  color: Color.fromARGB(255, 255, 125, 125), //文字的颜色
                  decoration: TextDecoration.underline, //下划线
                  decorationStyle: TextDecorationStyle.dotted //下划线的样式
                  ),
            ),
          )),
    );
  }
}

使用Container

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//声明MyApp类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '欢迎使用flutter',
       home: Scaffold(
          appBar: AppBar(title: Text('welcome to flutter')),
          body: Center(
            child: Container(
              child: new Text(
                'Hello LiFeng',
                style: TextStyle(
                  fontSize: 40.0,
                  color: Color.fromARGB(255, 255, 125, 125),
                ),
              ),
              //alignment: Alignment.center, //对齐方式
              width: 500.0,
              height: 300.0,
              color: Colors.lightBlue, //颜色
              padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
              margin: const EdgeInsets.all(10.0),
              //在使用decoration的时候要把color注释掉 会有报错
              decoration: new BoxDecoration(
                  gradient: const LinearGradient(colors: [
                    Colors.lightBlue,
                    Colors.greenAccent,
                    Colors.purple
                  ]),
                  border: Border.all(width: 5.0, color: Colors.red)),
            ),
          )),
    );
  }
}

使用Image

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
//声明MyApp类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '欢迎使用flutter',
      home: Scaffold(
       appBar: AppBar(title: Text('welcome to flutter')),
       body: Center(
         child: Container(
           child: new Image.network(
             'http://blogimages.jspang.com/blogtouxiang1.jpg',
             // fit: BoxFit.cover,  //控制图片的拉伸和挤压 
             //   color: Colors.lightBlue, //是要混合的颜色，如果你只设置color是没有意义的
             //   colorBlendMode: BlendMode.darken, //是混合模式，相当于我们如何混合
             repeat: ImageRepeat.repeat, //图片的重复
           ),
           width: 300.0,
           height: 200.0,
           color: Colors.lightBlue,
         ),
       )),
    );
  }
}