Flutter基础视频教程

Flutter基础视频教程

https://www.bilibili.com/video/BV15t411U7yf

P1 00视频学习方法说明

看视频 不看MP4写 不会看文字

Flutter.富啦特

P2 01认识Flutter是什么

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。
Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

官网 https://flutter.io/showcase/

Dart 大

flutter 120fps

120fps超高性能
Flutter采用GPU渲染技术,所以性能极高。

Flutter生态情况
github地址:https://github.com/Solido/awesome-flutter
showcase:https://flutter.io/showcase/

下载 https://docs.flutter.dev/release/archive#windows

flutter doctor

android studio 安卓 s丢

运行没反应 https://blog.csdn.net/m0_53022813/article/details/136827666

安装依赖 https://stackoverflow.com/questions/68236007/i-am-getting-error-cmdline-tools-component-is-missing-after-installing-flutter

安装教程 https://www.cnblogs.com/luyj00436/p/17632117.html

Visual Studio主要用于flutter 桌面软件开发,如果您只是开发flutter app可以不用安装Visual Studio:

marven的部分最好替换一个国内的源,替换步骤如下:

打开flutter根目录
打开文件 packages/flutter_tools/lib/src/http_host_validator.dart
修改其中 kMaven(修改地址如下:http://maven.aliyun.com/nexus/content/groups/public/)
删除 bin/cache
重新执行 flutter doctor就没有报错了
————————————————

                            版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
                        
原文链接:https://blog.csdn.net/guliang28/article/details/134087662

P3 02Flutter开发环境搭建windows版


P4 03Flutter虚拟机安装

flutter项目gradle失败的解决方法 https://www.jianshu.com/p/d0cbef34e4db

Platforms:
Android
ios
Linux
MacOS
Web
Windows

旧版 https://www.jb51.net/article/279951.htm

问题 https://blog.csdn.net/weixin_45289656/article/details/136370826

只是显示android问题 https://www.cnblogs.com/openmind-ink/p/17702391.html

运行不了 https://blog.csdn.net/qq_41818873/article/details/133687844

加速 https://www.jianshu.com/p/9cbdf497d54f https://blog.csdn.net/yujunlong3919/article/details/105082443/

P5 04在VSCode下编写Flutter代码

vscode plugins flutter dart

flutter run

独立运行 https://blog.csdn.net/gw6601/article/details/131286911

D:\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Pixel_6_Pro_API_VanillaIceCream

adb connect 127.0.0.1:21503

连接失败设备 https://www.jianshu.com/p/e15e8feea95e

P6 05第一个HelloWorld程序

https://material.io UI

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'welcome to flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcom --- to flutter'),
        ),
        body: Center(
          child: Text('hello kooteam'),
        ),
      ),
    );
  }
}
main.dart

环境配置好 项目俩改gradle

P7 06Text Widget使用

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'welcome to flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcom to flutter'),
        ),
        body: Center(
          child: Text(
            'hello big kooteam Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3.',
            textAlign: TextAlign.left,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
                fontSize: 25.0,
                color: Color.fromARGB(255, 255, 0, 255),
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.solid),
          ),
        ),
      ),
    );
  }
}

P8 07Container Widget 使用1

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'welcome to flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcom to flutter'),
        ),
        body: Center(
            child: Container(
          child: new Text('hello kooteam', style: TextStyle(fontSize: 40.0)),
          alignment: Alignment.center,
          width: 500.0,
          height: 500.0,
          color: Colors.lightBlue,
        )),
      ),
    );
  }
}

P9 08Container Widget 使用2

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext rcontext) {
    return MaterialApp(
      title: 'welcome to flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcom to flutter'),
        ),
        body: Center(
            child: Container(
          child: new Text('hello kooteam', style: TextStyle(fontSize: 40.0)),
          alignment: Alignment.topLeft,
          width: 500.0,
          height: 500.0,
          // color: Colors.lightBlue, //decoration 不能同时用
          padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0.0, 0.0),
          margin: const EdgeInsets.all(20.0),
          decoration: new BoxDecoration(
              gradient: const LinearGradient(
                  colors: [Colors.lightBlue, Colors.greenAccent]),
              border: Border.all(width: 20.0, color: Colors.red)),
        )),
      ),
    );
  }
}

P10 09lmage组件的使用

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext rcontext) {
    return MaterialApp(
      title: 'welcome to flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcom to flutter'),
        ),
        body: Center(
            child: Container(
          child: new Image.network(
            'https://docs.flutter.cn/assets/images/cn/flutter-cn-logo.png',
            // repeat: ImageRepeat.repeat,
            // fit: BoxFit.fill,
            color: Colors.amber,
            colorBlendMode: BlendMode.darken, //配合color 混合
          ),
          width: 500.0,
          height: 500.0,
          color: Colors.lightBlue, //decoration 不能同时用
        )),
      ),
    );
  }
}


P11 10ListView组件简介

import 'package:app/history/main-container.dart';
import 'package:flutter/material.dart';

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

// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Flutter',
//       home: Scaffold(
//         appBar: new AppBar(title: new Text('Flutter')),
//         body: new ListView(
//           children: <Widget>[
//             new ListTile(
//               leading: new Icon(Icons.home),
//               title: new Text('home'),
//             ),
//             new ListTile(
//               leading: new Icon(Icons.settings),
//               title: new Text('settings'),
//             ),
//             new ListTile(
//               leading: new Icon(Icons.search),
//               title: new Text('search'),
//             ),
//           ],
//         ),
//       ),
//     );
//   }
// }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter'),
        ),
        body: new ListView(
          children: <Widget>[
            new Image.network(
                'https://img.yipic.cn/thumb/91859d21/9a93d6f0/b6546f0f/5c54e20d/big_91859d219a93d6f0b6546f0f5c54e20d.jpg?x-oss-process=image/format,webp/sharpen,100'),
            new Image.network(
                'https://hbimg.b0.upaiyun.com/eba23e5e2d8a5bc01611601059aeef75536b5e9dd190f-M0nAvp_fw658'),
          ],
        ),
      ),
    );
  }
}

P12 11ListView横向列表的使用

import 'package:app/history/main-container.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter'),
          ),
          body: Center(
            child: Container(
              child: MyList(),
              height: 180.0,
            ),
          )),
    );
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(
          width: 180,
          height: 180,
          color: Color(0xffff0000), //argb
        ),
        new Container(
          width: 180,
          height: 180,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180,
          height: 180,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180,
          height: 180,
          color: Colors.greenAccent,
        ),
      ],
    );
  }
}

P13 12ListView动态列表的使用

List()
List(100);
List<String>();
[1,2,3]
相当于数组    
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() =>
    runApp(MyApp(items: new List<String>.generate(500, (i) => "item $i")));

class MyApp extends StatelessWidget {
  final List<String> items;

  //视频
  // MyApp({Key key, @required this.items}) : super(key: key);
  MyApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter'),
          ),
          body: new ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return new ListTile(
                  title: new Text('${items[index]}'),
                );
              })),
    );
  }
}

P14 13GridView网格列表的使用

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Flutter',
//       home: Scaffold(
//           appBar: new AppBar(
//             title: new Text('Flutter'),
//           ),
//           body: GridView.count(
//             crossAxisCount: 3,
//             padding: const EdgeInsets.all(20.0),
//             crossAxisSpacing: 10.0,
//             children: <Widget>[
//               const Text('hello world'),
//               const Text('hello world'),
//               const Text('hello world'),
//               const Text('hello world'),
//               const Text('hello world'),
//               const Text('hello world'),
//             ],
//           )),
//     );
//   }
// }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter'),
          ),
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 0.7),
            children: <Widget>[
              Image.network(
                'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
                fit: BoxFit.cover,
              ),
              new Image.network(
                'http://img5.mtime.cn/mt/2024/06/17/095749.40636015_1280X720X2.jpg',
                fit: BoxFit.cover,
              ),
              new Image.network(
                'http://img5.mtime.cn/mt/2024/07/15/121951.12176160_1280X720X2.jpg',
                fit: BoxFit.cover,
              ),
              new Image.network(
                'http://img5.mtime.cn/mt/2024/05/27/165144.27828479_o.jpg',
                fit: BoxFit.cover,
              ),
              new Image.network(
                'http://img5.mtime.cn/mt/2024/06/17/101019.88610600_1280X720X2.jpg',
                fit: BoxFit.cover,
              ),
              new Image.network(
                'http://img5.mtime.cn/mt/2024/06/11/110152.25918170_1280X720X2.jpg',
                fit: BoxFit.cover,
              ),
              new Image.network(
                'http://img5.mtime.cn/mt/2024/06/18/111247.62696038_1280X720X2.jpg',
                fit: BoxFit.cover,
              ),
              new Image.network(
                'http://img5.mtime.cn/mt/2024/07/08/110427.18018843_1280X720X2.jpg',
                fit: BoxFit.cover,
              ),
              new Image.network(
                'http://img5.mtime.cn/mt/2024/06/19/104303.47347165_1280X720X2.jpg',
                fit: BoxFit.cover,
              ),
            ],
          )),
    );
  }
}

P15 14布局RowWidget的详细讲解

btn https://www.jianshu.com/p/5553055c2da6 https://www.jianshu.com/p/29160aebe1da

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter'),
          ),
          body: new Row(
            children: <Widget>[
              // new RaisedButton(), //这个按钮新版废弃
              new ElevatedButton(
                onPressed: () => {},
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.red)),
                child: new Text('button'),
              ),
              //Expanded =flex 1
              Expanded(
                child: new ElevatedButton(
                  onPressed: () => {},
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.red)),
                  child: new Text('button'),
                ),
              ),
              new ElevatedButton(
                onPressed: () => {},
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.blue)),
                child: new Text('button'),
              ),
            ],
          )),
    );
  }
}

Expanded 灵活布局

P16 15布局ColumnWidget垂直布局组件

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter'),
          ),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              new Text('hello fluter'),
              Expanded(
                child: new Text('I can vue react angular uniapp taro'),
              ),
              new Text('hello fluter'),
            ],
          )),
    );
  }
}

P17 16布局StackWidget层叠布局

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      // alignment: Alignment.center,
      alignment: const FractionalOffset(0.5, 0.8),
      children: [
        new CircleAvatar(
          backgroundImage: new NetworkImage(
              'https://i0.hdslb.com/bfs/face/dd2d557d69d28f43066f4bab6bd4fc40f03d2205.jpg'),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(color: Colors.lightBlue),
          padding: EdgeInsets.all(5.0),
          child: new Text('KooTeam'),
        )
      ],
    );
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter'),
          ),
          body: Center(
            child: stack,
          )),
    );
  }
}

P18 17布局PositionedWidget层叠定位组件

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      // alignment: Alignment.center,
      // alignment: const FractionalOffset(0.5, 0.8),
      children: [
        new CircleAvatar(
          backgroundImage: new NetworkImage(
              'https://i0.hdslb.com/bfs/face/dd2d557d69d28f43066f4bab6bd4fc40f03d2205.jpg'),
          radius: 100.0,
        ),
        new Positioned(
          child: Text('KooTeam'),
          top: 0,
          left: 0,
        ),
        new Positioned(
          child: Text('JohnKing'),
          bottom: 0,
          right: 0,
        )
      ],
    );
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter'),
          ),
          body: Center(
            child: stack,
          )),
    );
  }
}

P19 18布局CardWidget卡片布局组件

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var card = new Card(
      child: Column(
        children: [
          ListTile(
            title: Text(
              'KooTeam',
              style: TextStyle(fontWeight: FontWeight.w600),
            ),
            subtitle: Text('KooTeam is big Team'),
            leading: Icon(
              Icons.telegram,
              color: Colors.lightBlue,
            ),
          ),
          Divider(),
          ListTile(
            title: Text(
              'KooTeam',
              style: TextStyle(fontWeight: FontWeight.w600),
            ),
            subtitle: Text('KooTeam is big Team'),
            leading: Icon(
              Icons.telegram,
              color: Colors.lightBlue,
            ),
          ),
          Divider(),
          ListTile(
            title: Text(
              'KooTeam',
              style: TextStyle(fontWeight: FontWeight.w600),
            ),
            subtitle: Text('KooTeam is big Team'),
            leading: Icon(
              Icons.telegram,
              color: Colors.lightBlue,
            ),
          ),
        ],
      ),
    );
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter'),
          ),
          body: Center(
            child: card,
          )),
    );
  }
}

P20 19导航父子页面的跳转返回

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter Navigator',
    home: new FristScreen(),
  ));
}

class FristScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FristSreen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('goSecond'),
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (contxt) => new SecondScreen()));
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FristSreen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('goFrist'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}


P21 20导航的参数传递和接受-1

快速生成 插件 Awesome Flutter Snippets

stlss 快捷键

P22 21导航的参数传递和接受-2

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class Product {
  final String title;
  final String des;
  Product(this.title, this.des);
}

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: MyList(
      products: List.generate(20, (i) => Product('KooTeam Products', '$i')),
    ),
  ));
}

class MyList extends StatelessWidget {
  final List<Product> products;
  MyList({Key? key, required this.products}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Products'),
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${products[index].title},${products[index].des}'),
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (contxt) {
                //传悌 参数
                return new ProductDetail(product: products[index]);
              }));
            },
          );
        },
      ),
    );
  }
}

class ProductDetail extends StatelessWidget {
  final Product product;
  const ProductDetail({Key? key, required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Product Detail'),
      ),
      body: Center(
        child: Text('this is product detail ${product.des}'),
      ),
    );
  }
}

P23 22页面跳转并返回数据

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Flutter',
    home: First(),
  ));
}

class First extends StatelessWidget {
  const First({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('选择'),
          onPressed: () {
            _navigatorToAv(context);
          },
        ),
      ),
    );
  }

  _navigatorToAv(BuildContext context) async {
    var result =
        await Navigator.push(context, MaterialPageRoute(builder: (context) {
      return new Second();
    }));
    // Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result'))); //旧版
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text('$result')));
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First'),
      ),
      body: Column(
        children: [
          ElevatedButton(
              onPressed: () {
                Navigator.pop(context, 'KooTeam');
              },
              child: Text('KooTeam')),
          ElevatedButton(
              onPressed: () {
                Navigator.pop(context, 'JohnKing');
              },
              child: Text('JohnKing')),
        ],
      ),
    );
  }
}

P24 23静态资源和项目图片的处理

pubspec.yaml
  assets:
    - images/code.png
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'flutter',
      home: Home(),
    ));

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset('images/code.png'),
    );
  }
}

P25 24Flutter的打包

生成 keystore key.jks 不要分享出去

改配置

flutter build apk

flutter install

https://docs.flutter.cn/deployment/android

123456 C:\Users\koo\upload-keystore.jks

https://juejin.cn/post/7207078219215929402

flutter 命令

https://juejin.cn/post/7012078797033848862

创建flutter项目文件 flutter create demo

flutter upgrade 升级

可以加不加 const new 组件 不推荐new 推荐直接写

vs工作负荷

最新Visual Studio的安装与使用 - 工作负荷选择 c语言 | 手把手基础教学_vs工作负荷怎么选-CSDN博客

visual studio安装好后,如何添加新的工作负载和组件_visual studio哪里安装component-CSDN博客

posted @   KooTeam  阅读(21)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示