flutter_01

一、环境搭建

1) 配置系统环境变量

不配置的话，我们下载sdk得翻墙，要不然网速慢的不要不要的。

image.png

2)下载flutter Sdk

解压到d盘

3) 配置环境FLUTTER_HOME变量

可以不配置，不配置的话，as创建flutter工程的时候，会再次提示你，需要下载flutter<br /> image.png image.png

这里是添加不是覆盖，需要注意

4) 测试flutter环境

flutter doctor

flutter doctor --android-licenses 证书缺少时运行

image.png 关于as版本，只要有一行正常即可，上图上，我们会有不同的版本

二、 知识点

1) 无状态(statelessWidget)&有状态(stateFulWidget)

无: 创建和初始化后，不能再修改它们的内容<br />有:状态是可变的

2) java&dart 方法重载

1. java

public void getName(){}
public void getName(int a){}
public void getName(float b){}
public void getName(int a,float b){}

2.dart

public void getName({int a,float b});

三、flutter示例

1) 基础示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Wlecome to flutter",
      home: new Scaffold(
        appBar: new AppBar(   // 创建标题栏
          title: new Text("Hello Flutter"),
        ),
        body: new Center(  // 创建中心显示的文本控件
          child: new Text("this is first flutter app , good luck2 ! "),
        ),
      ),
    );
  }
}

2) 文字随机生成并显示

1) english_words 版本获取

资料链接 版本查看与获取

2) 版本依赖与get

1. pubspec.yaml添加

dependencies:
  english_words: ^3.1.5

2. 点击下图中的get即获取包

image.png

3) main.dart中代码修改

import 'package:english_words/english_words.dart'; // 1. 导入english_word包
import 'package:flutter/material.dart'; 

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    WordPair wordPair = new WordPair.random(); // 声明引用

    return new MaterialApp(
      title: "Wlecome to flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello Flutter"),
        ),
        body: new Center(
                    // 调用引用，生成字符串
          child: new Text(wordPair.asLowerCase),
        ),
      ),
    );
  }
}

ctrl+s 热重载

3) 使用有状态的widget对代码进行重构

1. 定义有状态的widget

class RandwordsWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new RandwordsState();
  }
}

2. 定义状态

class RandwordsState extends State<RandwordsWidget> {
  @override
  Widget build(BuildContext context) {
    WordPair wordPair = new WordPair.random();
    return new Text(wordPair.asLowerCase);
  }
}

3. 原代码修改

import 'package:english_words/english_words.dart'; // 1. 导入english_word包
import 'package:flutter/material.dart'; 

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Wlecome to flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello Flutter"),
        ),
        body: new Center(
                    // 使用有状态的控件，因为这里的原生控件定义之后状态是不能修改的
          child: new RandwordsWidget(),
        ),
      ),
    );
  }
}

4) listview的使用

滚动到底端自动加载更多

1. 数据集合定义和样式定义

// 定义数组: dart中没有List
  var suggestions = <WordPair>[];

  // 定义字体样式
  var fontStyle = const TextStyle(fontSize: 18.0);

2. listview及itemview构建

/*构建listview*/
  Widget buildListView() {
    return new ListView.builder(
        // 设置边距
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, index) {
          // 如果index是基数
          if (index.isOdd) {
            // 定义一个分割线
            return new Divider();
          }

          // 向下取取整: 5/2=2.5 取2
          int newIndex = index ~/ 2;
          if (newIndex >= suggestions.length) {
            // 如果条目大于等于了数组的长度再放10条进行，这样就实现了滚动到底部自动加载更多
            suggestions.addAll(generateWordPairs().take(10));
          }
          // 这里使用的是新的索引不是原来的哦
          return buildItemView(suggestions[newIndex]);
        });
  }

  /*构建listview中的itemView*/
  Widget buildItemView(WordPair wordPair) {
    return new ListTile(
        title: new Text(wordPair.asLowerCase, style: fontStyle));
  }

3. 项目完整代码

class RomdomWordsWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new RomdomWordsState();
  }
}

class RomdomWordsState extends State<RomdomWordsWidget> {
  // 定义数组: dart中没有List
  var suggestions = <WordPair>[];

  // 定义字体样式
  var fontStyle = const TextStyle(fontSize: 18.0);

  /*构建listview*/
  Widget buildListView() {
    return new ListView.builder(
        // 设置边距
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, index) {
          // 如果index是基数
          if (index.isOdd) {
            // 定义一个分割线
            return new Divider();
          }

          // 向下取取整: 5/2=2.5 取2
          int newIndex = index ~/ 2;
          if (newIndex >= suggestions.length) {
            // 如果条目大于等于了数组的长度再放10条进行，这样就实现了滚动到底部自动加载更多
            suggestions.addAll(generateWordPairs().take(10));
          }
          // 这里使用的是新的索引不是原来的哦
          return buildItemView(suggestions[newIndex]);
        });
  }

  /*构建listview中的itemView*/
  Widget buildItemView(WordPair wordPair) {
    return new ListTile(
        title: new Text(wordPair.asLowerCase, style: fontStyle));
  }

  @override
  Widget build(BuildContext context) {
    // Scaffold移到这里了，App中的可是会跟着变化哦.
    return new Scaffold(
        appBar: AppBar(
          title: Text("列表展示"),
        ),
        body: buildListView());
  }
}

4. app代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "Wlecome to flutter", home: new RomdomWordsWidget());
  }
}

5. 效果:

image.png