Flutter基础知识

Posted 2022-12-10 黄毛火烧雪下

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter基础知识相关的知识，希望对你有一定的参考价值。

const 常量构造函数，如果控件是，则前面加；如果常量构造函数包含有非常量构造函数，则不加，内部是的控件单独加

1.Flutter学习网址

Flutter 中文官网 https://flutter.cn/
Flutter 官网：https://flutter.dev/
Flutter Packages官网：https://pub.dev/

2.环境搭建，真机调试

第8步提前操作

1.总步骤

Flutter android 环境搭建

电脑上面安装JDK
电脑上面下载安装AS
电脑上面下载配置 Flutter SDK
电脑上配置Flutter国内镜像
运行 flutter doctor 命令检测环境是否配置成功，更具提示安装对应软件
AS 安装Flutter 插件
创建运行Flutter项目

2.AS 安装插件：Flutter 和Dart

3.Flutter sdk

Flutter sdk（使用最新版本）下载路径 https://docs.flutter.dev/development/tools/sdk/releases?tab=windows#windows

4.Flutter 国内镜像

Flutter 国内镜像地址 https://docs.flutter.dev/community/china

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
flutter doctor

5.flutter doctor

![在这里插入图片描述](https://img-blog.csdnimg.cn/8586d46cea2a4c1084bab28a31dfb243.pngflutter doctor --android-licenses 一路点y

（非必须）Visual Studio 如果需要开发桌面应用 https://visualstudio.microsoft.com/downloads/
C++ CMake tools for Windows 必须下载 1.5G
#### 6.AS 新建flutter项目（项目目录都是小写）

7.AS 打开创建好的android 项目

8.vs下载即操作

vs下载路径：https://code.visualstudio.com/
插件：fluter dart Awesome FlutterSnippets（flutter提示工具）
不同的插件，快捷方式不一样

9.快捷键操作项目

vs 打开flutter文件夹
flutter run
flutter run -d all
ctrl+s 保存
常用快捷键（鼠标点到控制台）
r键：点击后热加载，也算是重新加载
R键：热重启项目
P键：显示网络，这个可以很好的掌握布局情况，工作中很有用
o键：切换Android和ios的预览模式
q键：退出调试模式 ctrl+c

3.Flutter 目录结构介绍入口自定义Widget Center组件 Text组件 MaterailAp组件 Scaffpld组件礼包

lib 项目目录
pubspec.yaml 配置文件项目依赖项目版本号

analysis_options.yaml 分析dart语法文件，老项目升级成新项目有警告信息的话可以删掉此文件，可以全部删掉，有利于语法规范

import 'package:flutter/material.dart';

void main() 
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: HomeWidge(),
    ),
  ));


class HomeWidge extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return const Center(
        child: Text("我是一个文本",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize: 25.0, color: Colors.red)));

4.Container组件 Text组件

const（常量构造函数）规范，也可以不加

import 'package:flutter/material.dart';

void main() 
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: Column(
        children: [MyApp(), MyButton(), MyText()],
      ),
    ),
  ));


class HomeWidge extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return const Center(
        child: Text("我是一个文本",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize: 25.0, color: Colors.red)));
  


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);
  @override
  Widget build(BuildContext context) 
    return Center(
      child: Container(
        margin: const EdgeInsets.fromLTRB(0, 60, 0, 0),
        alignment: Alignment.center,
        height: 200,
        width: 200,
        // transform: Matrix4.skewY(0.2),
        decoration: BoxDecoration(
            color: Colors.yellow,
            gradient: const LinearGradient(colors: [Colors.red, Colors.orange]),
            boxShadow: const [
              BoxShadow(
                color: Colors.blue,
                offset: Offset(2.0, 2.0),
                blurRadius: 10.0,
              )
            ],
            border: Border.all(color: Colors.red, width: 2),
            borderRadius: BorderRadius.circular(8)),
        child: const Text(
          "你好Flutter",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  


class MyButton extends StatelessWidget 
  const MyButton(super.key);

  @override
  Widget build(BuildContext context) 
    return Container(
      alignment: Alignment.center,
      width: 200,
      height: 40,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
      margin: const EdgeInsets.fromLTRB(0, 40, 0, 0),
      child: const Text("按钮",
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
          )),
    );
  


class MyText extends StatelessWidget 
  const MyText(super.key);

  @override
  Widget build(BuildContext context) 
    return Container(
      alignment: Alignment.center,
      width: 200,
      height: 200,
      decoration: const BoxDecoration(
        color: Colors.yellow,
      ),
      child: const Text(
        "如果是负值，会让单词变得更紧凑如果是负值，会让单词变得更紧凑",
        textAlign: TextAlign.left,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            color: Colors.red,
            fontStyle: FontStyle.italic),
      ),
    );

5.图片Image组件本地图片远程图片图片剪切圆形图片

上下间距
SizedBox( height: 20)

import 'package:flutter/material.dart';

class MyApp2 extends StatelessWidget 
  const MyApp2(super.key);

  @override
  Widget build(BuildContext context) 
    return Center(
      child: Container(
        width: 150,
        height: 150,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(10),
            image: const DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                    "https://www.itying.com/themes/itying/images/ionic4.png"))),
        // child: Image.network(
        //   "https://www.itying.com/themes/itying/images/ionic4.png",
        //   fit: BoxFit.cover,
        // ),
      ),
    );
  


//实现圆形图片
class Circular extends StatelessWidget 
  const Circular(super.key);

  @override
  Widget build(BuildContext context) 
    return Center(
      child: ClipOval(
        child: Image.network(
          "https://www.itying.com/themes/itying/images/ionic4.png",
          width: 150.0,
          height: 150.0,
          fit: BoxFit.cover,
        ),
      ),
    );
  


class LocationImg extends StatelessWidget 
  const LocationImg(super.key);

  @override
  Widget build(BuildContext context) 
    return Center(
      child: ClipOval(
        child: Image.asset(
          "images/a.jpg",
          width: 150.0,
          height: 150.0,
          fit: BoxFit.cover,
        ),
      ),
    );

6.ICON图标组件自带图标和自定义图标

用处不大

7.列表（ListView GridView）组件

2.GridView创建网格列表主要有下面三种方式

1、可以通过GridView.count 实现网格布局
2、可以通过GridView.extent 实现网格布局
3、通过GridView.builder实现动态网格布局

	GridView.count	GridView.extent
	crossAxisCount 一行的Widget数量	maxCrossAxisExtent 横轴子元素的最大长度
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount	SliverGridDelegateWithMaxCrossAxisExtent

import 'package:flutter/material.dart';
import 'package:flutter01/res/listData.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("Fluter app")),
        body: MyHomePage(),
      ),
    );
  


class MyHomePage extends StatelessWidget 
  const MyHomePage(super.key);
  Widget _initGridViewData(context, index) 
    return Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
      child: Column(
        children: [
          Image.network(listData[index]["imageUrl"]),
          const SizedBox(height: 10),
          Text(
            listData[index]["title"],
            style: const TextStyle(fontSize: 18),
          )
        ],
      ),
    );
  

  @override
  Widget build(BuildContext context) 
    return GridView.builder(
      padding: const EdgeInsets.all(10),
      itemCount: listData.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            crossAxisCount: 2,
            childAspectRatio: 1),
        itemBuilder: _initGridViewData);

List listData = [
  
    "title": "Candy shop",
    "author": "Mohamed Chain",
    "imageUrl": "https://www.itying.com/images/flutter/1.png",
  ,
];

8.Flutter页面布局 Padding Row Column flex Expanded

this.icon 是 this.icon=icon; 的简写
required this.color 中 required 表明是必传参数
this.color = Colors.red 这个写，写可以不传

class IconContainer extends StatelessWidget 
  Color color;
  double size;
  IconData icon;
  IconContainer(this.icon,
      Key? key, this.color = Colors.red, this.size = 32.0)
      : super(key: key);
  IconContainer1(
      Key? key, this.color = Colors.red, this.size = 32.0): super(key: key) 
this.icon=icon;
      

  @override
  Widget build(BuildContext context) 
    return Container(
      height: 100,
      width: 100,
      color: this.color,
      child: Icon(icon, color: color, size: size),
    );

double.infinity 和double.maxFinite可以让当前元素的width或者height达到父元素的尺寸
底层代码，只能用在Container容器里

width: double.infinity,
height: double.infinity,

flex Expanded 弹性布局

9.Flutter页面布局 Stack层叠组件，Stack与Align 、Stack与Positioned实现定位布局

1.最常用 Stack与Positioned

FlutterMediaQuery获取屏幕宽度和高度
final size = MediaQuery.of(context).size;
size.width,

alignment: Alignment(-1, 1),
算法实现
(Alignment.xchildWidth/2+childWidth/2, Alignment.ychildHeight/2+childHeight/2)

2.具体实例：相对与容器定位

import 'package:flutter/material.dart';
import 'package:flutter01/res/listData.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("Fluter app")),
        body: MyHomePage(),
      ),
    );
  


class MyHomePage extends StatelessWidget 
  const MyHomePage(super.key);

  @override
  Widget build(BuildContext context) 
    final size = MediaQuery.of(context).size;
    return Column(
      children: [
        SizedBox(
          width: double.infinity,
          height: 40,
          child: Stack(
            children: const [
              Align(
                alignment: Alignment.topLeft,
                child: Text("收藏"),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Text("购买"),
              ),
            ],
          ),
        ),
        SizedBox(
          width: double.infinity,
          height: 40,
          child: Stack(
            children: const [
              Positioned(left: 10, child: Text("收藏")),
              Positioned(right: 10, child: Text("购买")),
            ],
          ),
        )
      ],
    );

9.Flutter页面布局 AspectRatio、 Card、 CircleAvatar 组件

1.child的宽高比 AspectRatio

用在控制图片的宽高比

 AspectRatio(
      aspectRatio: 3 / 1,
      child: Container(
        color: Colors.red,
      ),
    )

2 .卡片布局Card

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: Text("Fluter app")),
        body: MyHomePage(),
      ),
    );
  


class MyHomePage extends StatelessWidget 
  const MyHomePage(super.key);

  @override
  Widget build(BuildContext context) 
    final size = MediaQuery.of(context).size;
    return ListView(
      children: [
        Card(
          margin: EdgeInsets.all(10),
          elevation: 10,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          child: Column(
            children: const [
              ListTile(
                title: Text(
                  "张三",
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text("高级软甲女工程师"),
              ),
              Divider(),
              ListTile(
                title: Text(
                  "电话：1443234564",
                ),
                subtitle: Text("地址：xxxxx"),
              )
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: const [
              ListTile(
                title: Text(
                  "李四",
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text("高级软甲男工程师"),
              ),
              Divider(),
              ListTile(
                title: Text(
                  "电话：1443234564",
                ),
                subtitle: Text("地址：xxxxx"),
              )
            ],
          ),
        )
      ],
    );

3 .卡片图文列表

ListView(
      children: [
        Card(
          margin: const EdgeInsets.all(10),
          elevation: 20,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: ClipOval(
                    child: Image.network(
                  "https://www.itying.com/images/flutter/2.png",
                  fit: BoxFit.cover,
                  height: 40,
                  width: 40,
                )),
                title: const Text("XXXXXXX"),
                subtitle: const Text("aaaaaaaaa"),
              )
            ],
          ),
        )
      ],
    )

4 .实现一个圆形图片 CircleAvatar

 CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://www.itying.com/images/flutter/3.png"),
                )

ClipOval(
                    child: Image.network(
                  "https://www.itying.com/images/flutter/2.png",
                  fit: BoxFit.cover,
                  height: 40,
                  width: 40,
                ))

5 .动态卡片图文列表

import 'package:flutter/material.dart';
import './res/listData.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: Text("Fluter app")),
        body: MyHomePage(),
      ),
    );
  


class MyHomePage extends StatelessWidget 
  const MyHomePage(super.key);
  List<Widget> _initCardDate() 
    var tempList = listData.map((value) 
      return Card(
        margin: const EdgeInsets.all(10),
        elevation: 20,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                value["imageUrl"],
                fit: BoxFit.cover,
              ),
            ),
            ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage(value["imageUrl"]),
              ),
              title: Text(value["title"]),
              subtitle: Text(value["author"]),
            )
          ],
        ),
      );
    );
    return tempList.toList();
  

  @override
  Widget build(BuildContext context) 
    final size = MediaQuery.of(context).size;
    return ListView(
      children: _initCardDate(),
    );

10.Flutter按钮组件 Elevatedbutton、TextButton、OutlineButton、IconButton

import 'package:flutter/material.dart';
import './res/listData.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: Text("Fluter app")),
        body: MyHomePage(),
      ),
    );
  


class MyHomePage extends StatelessWidget 
  const MyHomePage(super.key);

  @override
  Widget build(BuildContext context) 
    final size = MediaQuery.of(context).size;
    return ListView(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                onPressed: () 
                  print("ElevatedButton");
                ,
                child: const Text("普通按钮")),
            TextButton(onPressed: () , child: const Text("文本按钮")),
            OutlinedButton(onPressed: () , child: const Text("带边框的按钮")),
            IconButton(onPressed: () , icon: const Icon(Icons.thumb_up))
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton.icon(
                onPressed: () ,
                icon: const Icon(Icons.thumb_up),
                label: const Text("点赞")),
            TextButton.icon(
                onPressed: () ,
                icon: const Icon(Icons.thumb_up),
                label: const Text("点赞")),
            OutlinedButton.icon(
                onPressed: () ,
                icon: const Icon(Icons.thumb_up),
                label: const Text("点赞")),
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.red),
                    foregroundColor: MaterialStateProperty.all(Colors.black)),
                onPressed: () ,
                child: const Text("普通按钮")),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(
              width: 140,
              height: 60,
              child: ElevatedButton(
                  style: ButtonStyle(
                      以上是关于Flutter基础知识的主要内容，如果未能解决你的问题，请参考以下文章 
 在 Flutter 中设置开关按钮的图标 [关闭]
 Flutter创建圆圈图标按钮
 更改在 Android 中按下概览按钮时显示的 Flutter 图标
 带有文本和图标的圆形按钮
 Flutter 组件集录 | 从图标按钮看组件封装
 Flutter 图标显示为矩形