flutter基础组件整合的使用自用demo

已于 2022-02-16 09:40:05 修改
阅读量1.8k 收藏 2
点赞数
分类专栏： 学习笔记 文章标签： flutter android ios
于 2022-02-15 16:12:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Double1010/article/details/122944240
版权

使用的控件有:

Container,ListView,ListTile,Scaffold,Row,Column,Card,ClipRRect,Image,TextField,SizedBox,Icon,Text,Swiper,Toast

先上demo图:

主页
弹窗
左侧抽屉

右侧抽屉

使用到的依赖:

fluttertoast: ^8.0.8
flutter_swiper_null_safety: ^1.0.0

使用到的控件介绍

整体控件用的是Scaffold

  • appBar
    显示在界面顶部的一个 AppBar
appBar: AppBar(
        title: const Text(
          "标题",
          textAlign: TextAlign.center,
        ),
        actions: const [
          Icon(
            Icons.list_rounded,
            color: Colors.orange,
          )
        ],
      ),
  • body
    当前界面所显示的主要内容 Widget
body: GestureDetector(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            _viewpage(context),
            _listView(),
            _item(),
            _editText()
          ],
        ),
      ),
  • bottomNavigationBar
    显示在页面底部的导航栏
    当点击第2个按钮(i=1)时会弹出dialog
bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            label: "首页",
            icon: Icon(
              Icons.home,
            ),
          ),
          BottomNavigationBarItem(
            label: "BottomNavigationBarItem_按钮2",
            icon: Icon(
              Icons.bike_scooter,
            ),
          ),
          BottomNavigationBarItem(
            label: "BottomNavigationBarItem_按钮3",
            icon: Icon(
              Icons.bike_scooter,
            ),
          ),
        ],
        currentIndex: currentIndex,
        onTap: (int i) {   showDialog<Null>(
                context: context,
                builder: (BuildContext context) {
                  return SimpleDialog(
                    title: Text('选择弹窗'),
                    children: [
                      SimpleDialogOption(
                        child: Text('选项1'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      SimpleDialogOption(
                        child: Text('选项2'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      SimpleDialogOption(
                        child: Text('选项3'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                });},
      ),
  • 抽屉布局 drawer/endDrawer
 	   drawer: Drawer(
        child: _buildLoadingView(),
      ),
      endDrawer: Drawer(
        child: _ListWheelView(),
      ),
  • floatingActionButton
   floatingActionButton: new FloatingActionButton(
        onPressed: () {},
        child: new Icon(Icons.add),
        elevation: 3.0,
        highlightElevation: 2.0,
        backgroundColor: Colors.blue,
      ),
  • lodingview
 Widget _buildLoadingView() {
    return Container(
      width: double.maxFinite,
      height: 100,
      child: const Center(
        child: SizedBox(
          height: 50.0,
          width: 50.0,
          child: CircularProgressIndicator(
            strokeWidth: 2,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
          ),
        ),
      ),
    );
  }
  • ListWheelScrollView
  Widget _ListWheelView() {
    return Container(
      child: ListWheelScrollView(
        //高度
        itemExtent: 20,
        //ListWheelScrollView的渲染效果类似车轮，设置diameterRatio调整其直径属性：
        diameterRatio: 1,
        // 性表示车轮水平偏离中心的程度，用法如下
        offAxisFraction: 0,
        //通过useMagnifier和magnification属性实现放大镜效果，useMagnifier是否启用放大镜，magnification属性是放大倍率，用法如下：
        useMagnifier: true,
        magnification: 1.5,
        squeeze: 1,
        children: <Widget>[
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
        ],
      ),
    );
  }
  • viewpager
    主要就是Image和swiper的用法 ,需要引入依赖 flutter_swiper_null_safety: ^1.0.0
    Image.asset()资源文件要在pubspec.yaml中加好哦
    images是我在更目录创建的文件夹
 List<Image> imageList = [
    Image.asset(
      'images/1.png',
      fit: BoxFit.fill,
    ),
    Image.asset(
      'images/2.png',
      fit: BoxFit.fill,
    ),
    Image.network(
      "https://www.baidu.com/img/PC_9d6532110a742ba494be893d19bc80f8.png",
      fit: BoxFit.cover,
    ),
  ];

Widget _viewpage(BuildContext context) {
    return Container(
        width: MediaQuery.of(context).size.width,
        height: 190.0,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return imageList[index];
          },
          loop: true,
          index: 2,
          autoplay: true,
          duration: 600,
          viewportFraction: 0.8,
          scale: 0.2,
          layout: SwiperLayout.TINDER,
          itemCount: imageList.length,
          pagination: SwiperPagination(),
          control: SwiperControl(),
        ));
  }
  • listview
    主要是ListTile的用法,如果需要滚轴就外部嵌一个Scrollbar,
    点击事件为:渐变颜色带图标的Toast
  Widget _listView() {
    return Container(
      height: 40,
      child: ListView(
        // 设置方向
        scrollDirection: Axis.horizontal,
        // 设置边距
        padding: const EdgeInsets.all(4.0),
        // item宽度
        itemExtent: 150,
        // 当滚动方向为垂直方向时，那么itemExtent = 子控件的高度
        // 当滚动方向为水平方向时，那么itemExtent = 子控件的宽度
        physics: const AlwaysScrollableScrollPhysics(),
        children: <Widget>[
          Scaffold(
              body: ListTile(
            title: const Text('点击会有toast'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签2'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签3'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签4'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签5'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签6'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签7'),
            onTap: _showToast,
          )),
          const Scaffold(
              body: ListTile(
            title: Text('ListView标签8'),
          )),
        ],
      ),
    );
  }
  • demo图中横竖排序的组件
    这里用的有:Card,Text,Image,AspectRatio,ClipRRect,Container,MaterialButton
  Widget _item() {
    return Container(
      margin: const EdgeInsets.all(16),
      child: Row(
        verticalDirection: VerticalDirection.up,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            margin: EdgeInsets.all(20),
            child: Column(
              children: [
                const Text('Container+Column:下面2个'),
                MaterialButton(
                  color: Colors.blue,
                  textColor: Colors.white,
                  child: const Text('Row+Container:右边3个'),
                  onPressed: () {},
                ),

              ],
            ),
          ),
          Container(
            width: 170,
            height: 50,
            color: Colors.green,
            margin: EdgeInsets.all(20),
            child: AspectRatio(
              aspectRatio: 2.0 / 1.0,
              child: Text(
                'AspectRatio横纵比+Text',
                style: textStyle,
              ),
            ),
            transform: Matrix4.rotationZ(0.5),
          ),
          Card(
            margin: EdgeInsets.all(5),
            child: Column(
              children: const [
                Text('Card'),
              ],
            ),
          ),
          ClipRRect(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
            ),
            child: Image.asset(
              'images/1.png',
              width: 300,
              height: 100,
            ),
          ),
        ],
      ),
    );
  }
  • 输入框
    TextField
 Widget _editText() {
    return TextField(
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.lock),
        hintText: "输入框",
      ),
    );
  }
  • Toast
    需要引入 fluttertoast: ^8.0.8
_showToast() {
    fToast.removeQueuedCustomToasts();
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(
            //渐变位置
            begin: Alignment.topRight, //右上
            end: Alignment.bottomLeft, //左下
            stops: [
              0.2,
              0.8
            ],
            //渐变颜色[始点颜色, 结束颜色]
            colors: [
              Color.fromRGBO(10, 135, 224, 1.0),
              Color.fromRGBO(217, 13, 42, 1.0)
            ]),
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.check),
          SizedBox(
            width: 12.0,
          ),
          Text('Toast')
        ],
      ),
    );
    fToast.showToast(
        child: toast,
        gravity: ToastGravity.BOTTOM,
        toastDuration: Duration(seconds: 2));
    return toast;
  }

完整代码

新手上路,如有错误还请批评指正

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ModelWidget(),
    );
  }
}

class ModelWidget extends StatelessWidget {
  var fToast = FToast();
  int currentIndex = 0;
  var textStyle = TextStyle(fontSize: 15, color: Colors.yellow);

  List<Image> imageList = [
    Image.asset(
      'images/1.png',
      fit: BoxFit.fill,
    ),
    Image.asset(
      'images/2.png',
      fit: BoxFit.fill,
    ),
    Image.network(
      "https://www.baidu.com/img/PC_9d6532110a742ba494be893d19bc80f8.png",
      fit: BoxFit.cover,
    ),
  ];

  Widget _viewpage(BuildContext context) {
    return Container(
        width: MediaQuery.of(context).size.width,
        height: 170.0,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return imageList[index];
          },
          loop: true,
          index: 2,
          autoplay: true,
          duration: 600,
          viewportFraction: 0.8,
          scale: 0.2,
          layout: SwiperLayout.TINDER,
          itemCount: imageList.length,
          pagination: SwiperPagination(),
          control: SwiperControl(),
        ));
  }

  Widget _buildLoadingView() {
    return Container(
      width: double.maxFinite,
      height: 100,
      child: const Center(
        child: SizedBox(
          height: 50.0,
          width: 50.0,
          child: CircularProgressIndicator(
            strokeWidth: 2,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
          ),
        ),
      ),
    );
  }

  Widget _listView() {
    return Container(
      height: 40,
      child: ListView(
        // 设置方向
        scrollDirection: Axis.horizontal,
        // 设置边距
        padding: const EdgeInsets.all(4.0),
        // item宽度
        itemExtent: 150,
        physics: const AlwaysScrollableScrollPhysics(),
        children: <Widget>[
          Scaffold(
              body: ListTile(
            title: const Text('点击会有toast'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签2'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签3'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签4'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签5'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签6'),
            onTap: _showToast,
          )),
          Scaffold(
              body: ListTile(
            title: const Text('ListView标签7'),
            onTap: _showToast,
          )),
          const Scaffold(
              body: ListTile(
            title: Text('ListView标签8'),
          )),
        ],
      ),
    );
  }

  Widget _item() {
    return Container(
      margin: const EdgeInsets.all(16),
      child: Row(
        verticalDirection: VerticalDirection.up,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            margin: EdgeInsets.all(20),
            child: Column(
              children: [
                const Text('Container+Column:下面2个'),
                MaterialButton(
                  color: Colors.blue,
                  textColor: Colors.white,
                  child: const Text('Row+Container:右边3个'),
                  onPressed: () {},
                ),

              ],
            ),
          ),
          Container(
            width: 170,
            height: 50,
            color: Colors.green,
            margin: EdgeInsets.all(20),
            child: AspectRatio(
              aspectRatio: 2.0 / 1.0,
              child: Text(
                'AspectRatio横纵比+Text',
                style: textStyle,
              ),
            ),
            transform: Matrix4.rotationZ(0.5),
          ),
          Card(
            margin: EdgeInsets.all(5),
            child: Column(
              children: const [
                Text('Card'),
              ],
            ),
          ),
          ClipRRect(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
            ),
            child: Image.asset(
              'images/1.png',
              width: 300,
              height: 100,
            ),
          ),
        ],
      ),
    );
  }

  Widget _editText() {
    return TextField(
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.lock),
        hintText: "输入框",
      ),
    );
  }

  Widget _ListWheelView() {
    return Container(
      child: ListWheelScrollView(
        //高度
        itemExtent: 20,
        //ListWheelScrollView的渲染效果类似车轮，设置diameterRatio调整其直径属性：
        diameterRatio: 1,
        // 性表示车轮水平偏离中心的程度，用法如下
        offAxisFraction: 0,
        //通过useMagnifier和magnification属性实现放大镜效果，useMagnifier是否启用放大镜，magnification属性是放大倍率，用法如下：
        useMagnifier: true,
        magnification: 1.5,
        squeeze: 1,
        children: <Widget>[
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
          Text('123'),
        ],
      ),
    );
  }

  _showToast() {
    fToast.removeQueuedCustomToasts();
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(
            //渐变位置
            begin: Alignment.topRight, //右上
            end: Alignment.bottomLeft, //左下
            stops: [
              0.2,
              0.8
            ],
            //渐变颜色[始点颜色, 结束颜色]
            colors: [
              Color.fromRGBO(10, 135, 224, 1.0),
              Color.fromRGBO(217, 13, 42, 1.0)
            ]),
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.check),
          SizedBox(
            width: 12.0,
          ),
          Text('Toast')
        ],
      ),
    );
    fToast.showToast(
        child: toast,
        gravity: ToastGravity.BOTTOM,
        toastDuration: Duration(seconds: 2));
    return toast;
  }

  @override
  Widget build(BuildContext context) {
    fToast.init(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "标题",
          textAlign: TextAlign.center,
        ),
        /* 会被endDrawer挡住,所以这里先注释了
        actions: const [
           Icon(
             Icons.list_rounded,
             color: Colors.orange,
           )
         ],*/
      ),
      drawer: Drawer(
        child: _buildLoadingView(),
      ),
      endDrawer: Drawer(
        child: _ListWheelView(),
      ),
      body: GestureDetector(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            _viewpage(context),
            _listView(),
            _item(),
            _editText(),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {},
        child: new Icon(Icons.add),
        elevation: 3.0,
        highlightElevation: 2.0,
        backgroundColor: Colors.blue,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            label: "首页",
            icon: Icon(
              Icons.home,
            ),
          ),
          BottomNavigationBarItem(
            label: "BottomNavigationBarItem_按钮2",
            icon: Icon(
              Icons.bike_scooter,
            ),
          ),
          BottomNavigationBarItem(
            label: "BottomNavigationBarItem_按钮3",
            icon: Icon(
              Icons.bike_scooter,
            ),
          ),
        ],
        currentIndex: currentIndex,
        onTap: (int i) {
          if (i == 1) {
            showDialog<Null>(
                context: context,
                builder: (BuildContext context) {
                  return SimpleDialog(
                    title: Text('选择弹窗'),
                    children: [
                      SimpleDialogOption(
                        child: Text('选项1'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      SimpleDialogOption(
                        child: Text('选项2'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      SimpleDialogOption(
                        child: Text('选项3'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                });
          }
        },
      ),
    );
  }
}
小张同志正在划水
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flutterDemo:flutter常用组件demo
05-16
flutterDemo Flutter 一些控件使用例子 持续补充... 下面的几个项目实例demo 大家可以看看 boss直聘 osc douban
flutter_demo:测试
04-02
flutter_demo 一个新的Flutter项目。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
flutter创建一个demo
影子
06-06 958
上一篇开始介绍： 安装flutter和 dart的plugin插件： 启动一个app的demo： 注意和创建Android应用一样： 目录： - projectName -android //android的工程文件 -build //项目的构建输出文件 -ios //项目的ios工程文件 -lib //项目中的dart文件 -s...
flutter demo代码详解
最新发布
baidu_38317922的博客
02-23 1392
flutter demo代码详解
Flutter入门篇（四）：了解demo
NOWAY的博客
08-07 291
参考：https://zhuanlan.zhihu.com/p/83781896
flutter实战20个小demo（01）——底部导航栏
幼儿园园长
12-21 1441
从这篇文章开始，我准备新建一个实战合集，flutter实战20个小demo,记录自己学习这20个小实战的过程。 首先，新建一个文件夹，flutterDemo20，在这个文件夹里将会是我们这20个实战的代码。 首先，在文件夹下创建第一个项目 flutter create demo01 ...
flukit 一个Flutter UI组件库。
柳旦旦的博客【PHP面试网博主】
06-19 3615
地址 https://github.com/flutterchina/flukit 说明 flukit（Flutter UI Kit）是一个Flutter Widget库。 注意 本项目正在持续迭代中，欢迎大家贡献代码。 原QuickSelectListView迁移至AzListView QuickSelectListView 更改为 AzListView SuspensionListView 更改为 SuspensionView 贡献代码须知 工程目录 flukit --lib .
带你阅读 Flutter Demo（flutter 保姆级入门教程）
jclee95的个人博客
06-26 951
本文带你阅读 Flutter Demo，并全面解析其中涉及的相关知识点。
Flutter的优质UI组件库
热门推荐
czl0325的专栏
11-11 1万+
Flutter的优质UI组件库
Flutter 各种Demo效果合集
panghaha12138的博客
02-02 752
Flutter 各种Demo实现效果：1：2种 仿朋友圈 效果,顶部拉伸 和 不拉伸 2：仿抖音上下滑动视频播放 3：视频直播（使用的电视台的m3u8格式 直播） 4：拍照和录像功能 5：拟物化UI 6：俄罗斯方块 7：Google chrome 断网 小恐龙彩蛋游戏 8：3D 效果实现 9: App内全局 悬浮窗视频播放 10: 各种炫酷背景效果
【Flutter】保姆级一小时Flutter开发环境搭建到Demo跑通教程--无需开发者账号
sugoods的博客
04-16 3556
前提 硬件要求 一台MacOS电脑，最好系统是最新的 一台Android手机 一台iOS手机 宽带建议三百兆 硬件参考 黑苹果: MacOS 12.3 华为Mata 30 pro: 鸿蒙 2.0 苹果 Iphone x : 15.4 Android Studio: bumblebee|2020.1.1 XCODE: 13.3 不需要苹果开发者账号 不需要苹果开发者账号，有普通的苹果账号就好。不过普通的苹果账号多一步信任的过程，下面的步骤有详细说明。 简单说明 今天给2016年组装的老台式机重新安装了
阿里又一开源力作！FlutterGo App ： 140+ 组件的demo 演示与中文文档
Github中文社区
11-02 5529
点击上方“Github中文社区”，关注看遍Github，每天提升第045期原创分享 来自：Github中文社区 作者:huberhello，我是huber！你们的老战友（～～～～）...
Flutter布局组件
02-24
下面是Center组件的使用方法Container是使用非常多的一个布局容器，关于Container容器的显示规则，有如下几条：Container是使用非常多的一个布局容器，关于Container容器的显示规则，有如下几条：如果Container中...
flukit:Flutter UI套件。一个Flutter UI组件库
04-01
|中文简体 Flukit flukit （Flutter UI Kit）是一个Flutter Widget库。 注意 本项目正在持续迭代中，...添加一个新的窗口小部件，请在Demo目录添加使用示例，例如应该纯净无干扰，如果一个widget需要多个示例，可以
flutter_iOSexcel_flutter_DEMO_
10-02
flutter夸平台开发demo
Flutter组件化开发方案
01-27
这样可以有效的将Flutter和Native进行物理隔离，但随着Flutter承载的业务越来越多，与Native交互的接口变的越来越多，带来了很多管理问题，因此我们迫切需要采用新的开发模式，本文将介绍Flutter的组件化开发方案。...
flutter相关功能demo的集合，
大灰狼的小绵羊哥哥的博客
07-22 634
flutter_notebook有什么 flutetr_note_book有许多flutter相关功能demo的集合，它能够帮助您快速学习一些零碎的知识，本项目将会不定期更新。 如果您觉得有用的话可以Watch该项目，之后更新会自动通知您。 收集更多优秀样例 本项目大多为了提供一些问题的解决思路，如果您有更好的实现方式或者好的创意，欢迎提交PR! 如何下载单个项目 将单个项目下url复...
Flutter第三期 - 基础控件demo1
weixin_34319111的博客
04-26 146
开始学习一门全新的语言确实很慢，需要了解很多控件，个人的做法是大家都记不住这么多，所以就要做一个件事，那就是写博客，把你看到的情况都列出来，这样你遇到需求的时候就去翻翻控件那一篇，copycopy就记住了，也没有那么不想学了，可以去试试~这篇是我总结的各种前期遇到比较多的控件样式设置写法，以后会更新下去，这样每次记不住回来看一眼，跟API一样~ 1.Widget...
笔记：flutter中一些不错的 UI 相关库推荐（不断更新）
jclee95的个人博客
07-03 8405
本文收录了很多在 flutter pub 上显示流行度较高的第三方UI库和UI框架，对它们的效果进行了截图，目的是方便开发时进行查找； 这些模块多数来自于 flutter pub 官方主页 Flutter Favorites、Most popular packages、Top Flutter packages 也有一些仅仅只 popularity 值比较高 本文给出了图片和链接，并不介绍各个模块的用法，需要使用的读者可以点击链接到对应库的页面查看
如何使用flutter的text组件
09-20
如果您需要在 Flutter 中使用 Text 组件，可以按照以下步骤操作： 1. 导入 Flutter 的 material 包：`import 'package:flutter/material.dart';` 2. 创建一个 Text 组件：`Text('Hello, world!')` 3. 在 Text 组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值