flutter基础十一：输入，安装第三方包（演示安装 Intl 包）

最新推荐文章于 2024-05-03 20:51:09 发布
最新推荐文章于 2024-05-03 20:51:09 发布
阅读量966 收藏
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27597629/article/details/108921164
版权

文章目录

appBar 返回按钮

Scaffold 设置了appBar，就会自动添加返回按钮
在这里插入图片描述

4 Checkbox：复选框

import 'package:flutter/material.dart';
class CheckBoxDemo extends StatefulWidget {
  CheckBoxDemo({Key key}) : super(key: key);

  @override
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}

class _CheckBoxDemoState extends State<CheckBoxDemo> {
  bool _checkBoxItemA=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CheckBoxDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Checkbox(
                  value: _checkBoxItemA, //false 未勾选状态，true勾选状态，未勾选的颜色默认是Theme的accentColor
                  onChanged: (value){
                    setState(() {
                      _checkBoxItemA=value;
                    });
                  },
                  activeColor:Colors.yellow ,//勾选后的颜色
                  )
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

5 CheckboxListTile：带标签与图标的复选框

import 'package:flutter/material.dart';
class CheckBoxDemo extends StatefulWidget {
  CheckBoxDemo({Key key}) : super(key: key);

  @override
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}

class _CheckBoxDemoState extends State<CheckBoxDemo> {
  bool _checkBoxItemA=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CheckBoxDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CheckboxListTile(
              value: _checkBoxItemA, 
              onChanged: (value){
                setState(() {
                  _checkBoxItemA=value;
                });
              },
              title:  Text('Checkbox Item A'),//主标题
              subtitle: Text('Description'),//子标题
              secondary:Icon(Icons.bookmark) ,//图标
              selected: _checkBoxItemA,//选择状态，对应状态下图标颜色会变化
              ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                /*Checkbox(
                  value: _checkBoxItemA, //false 未勾选状态，true勾选状态，未勾选的颜色默认是Theme的accentColor
                  onChanged: (value){
                    setState(() {
                      _checkBoxItemA=value;
                    });
                  },
                  activeColor:Colors.yellow ,//勾选后的颜色
                  )*/
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

6 Radio：单选按钮

import 'package:flutter/material.dart';
class RadioDemo extends StatefulWidget {
  RadioDemo({Key key}) : super(key: key);

  @override
  _RadioDemo createState() => _RadioDemo();
}

class _RadioDemo extends State<RadioDemo> {
  int  _radioGroupA=0;
  void _handleRadioValueChanged(int value){
    setState(() {
      _radioGroupA=value;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RadioDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Radio(
                  value: 0, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.black,
                  ),
                Radio(
                  value: 1, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.black,
                  )
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

7 RadioListTile：带标签与图标的单选按钮

import 'package:flutter/material.dart';
class RadioDemo extends StatefulWidget {
  RadioDemo({Key key}) : super(key: key);

  @override
  _RadioDemo createState() => _RadioDemo();
}

class _RadioDemo extends State<RadioDemo> {
  int  _radioGroupA=0;
  void _handleRadioValueChanged(int value){
    setState(() {
      _radioGroupA=value;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RadioDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('RadioGroupValue:$_radioGroupA'),
            SizedBox(height:32.0),
            RadioListTile(
              value: 0, 
              groupValue: _radioGroupA, 
              onChanged: _handleRadioValueChanged,
              title: Text('Options A'),
              subtitle: Text('Description'),
              secondary: Icon(Icons.filter_1),
              selected: _radioGroupA==0,//是否使用选中的颜色
              ),
            RadioListTile(
              value: 1, 
              groupValue: _radioGroupA, 
              onChanged: _handleRadioValueChanged,
              title: Text('Options B'),
              subtitle: Text('Description'),
              secondary: Icon(Icons.filter_2),
              selected: _radioGroupA==1,//是否使用选中的颜色
              ),
            
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

8 Switch：开关

import 'package:flutter/material.dart';
class SwitchDemo extends StatefulWidget {
  SwitchDemo({Key key}) : super(key: key);

  @override
  _SwitchDemo createState() => _SwitchDemo();
}

class _SwitchDemo extends State<SwitchDemo> {
  bool _switchItemA=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RadioDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[     
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(_switchItemA?'😀':'😔'),
                Switch(
                  value: _switchItemA, 
                  onChanged: (value){
                    setState(() {
                      _switchItemA=value;
                    });
                  }
                  )
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

9 SwitchListTile：带标签与图标的开关

import 'package:flutter/material.dart';
class SwitchDemo extends StatefulWidget {
  SwitchDemo({Key key}) : super(key: key);

  @override
  _SwitchDemo createState() => _SwitchDemo();
}

class _SwitchDemo extends State<SwitchDemo> {
  bool _switchItemA=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RadioDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[    
            SwitchListTile(
              value: _switchItemA,
              onChanged: (value){
                setState(() {
                  _switchItemA=value;
                });
              },
              title: Text('Switch Item A'),
              subtitle: Text('Description'),
              secondary: Icon(_switchItemA?Icons.visibility:Icons.visibility_off),
              selected: _switchItemA,
            ) ,
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

10 Slider：滑动选择器

import 'package:flutter/material.dart';

class SliderDemo extends StatefulWidget {
  @override
  _SliderDemoState createState() => _SliderDemoState();
}

class _SliderDemoState extends State<SliderDemo> {
  double _sliderItemA = 0.0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SliderDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Slider(
                  value: _sliderItemA,
                  onChanged: (value) {
                    setState(() {
                      _sliderItemA = value;
                    });
                  },
                  activeColor: Theme.of(context).accentColor,
                  inactiveColor: Theme.of(context).accentColor.withOpacity(0.3),
                  min: 0.0,
                  max: 10.0,
                  divisions: 10,
                  label: '${_sliderItemA.toInt()}',
                ),
              ],
            ),
            SizedBox(height: 16.0,),
            Text('SliderValue: $_sliderItemA'),
          ],
        ),
      )
    );
  }
}

在这里插入图片描述

11 安装第三方包（演示安装 Intl 包）

在这里插入图片描述
搜索包，打开，找到版本号

在这里插入图片描述
在这里插入图片描述
点击运行会自动安装。

12 显示格式化日期

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class DateTimeDemo extends StatefulWidget {
  DateTimeDemo({Key key}) : super(key: key);

  @override
  _DateTimeDemo createState() => _DateTimeDemo();
}

class _DateTimeDemo extends State<DateTimeDemo> {
final DateTime selectedDate=DateTime.now();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DateTimeDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
           
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InkWell(//可以添加一个onTap属性
                  onTap:(){

                  },
                  child: Row(
                    children:<Widget>[
                      Text(DateFormat.yMMMd().format(selectedDate)),
                      Icon(Icons.arrow_drop_down),
                    ]
                  ),
                ),
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

13 showDatePicker：选择日期

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class DateTimeDemo extends StatefulWidget {
  DateTimeDemo({Key key}) : super(key: key);

  @override
  _DateTimeDemo createState() => _DateTimeDemo();
}

class _DateTimeDemo extends State<DateTimeDemo> {

final DateTime selectedDate=DateTime.now();

_selectDate(){
  showDatePicker(
    context: context, 
    initialDate: selectedDate,//初始时间 
    firstDate: DateTime(1900), //可选择的最早日期
    lastDate: DateTime(2100)//可选择的未来期限
    );
}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DateTimeDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
           
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InkWell(//可以添加一个onTap属性
                  onTap:_selectDate,
                  child: Row(
                    children:<Widget>[
                      Text(DateFormat.yMd().format(selectedDate)),
                      Icon(Icons.arrow_drop_down),
                    ]
                  ),
                ),
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

showDatePicker：获取选择的日期

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';
class DateTimeDemo extends StatefulWidget {
  DateTimeDemo({Key key}) : super(key: key);

  @override
  _DateTimeDemo createState() => _DateTimeDemo();
}

class _DateTimeDemo extends State<DateTimeDemo> {

 DateTime selectedDate=DateTime.now();

_selectDate() async {
  final DateTime date=await showDatePicker(
    context: context, 
    initialDate: selectedDate,//初始时间 
    firstDate: DateTime(1900), //可选择的最早日期
    lastDate: DateTime(2100)//可选择的未来期限
    );
  if(date== null)return;
  setState(() {
    selectedDate=date;
  });
}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DateTimeDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
           
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InkWell(//可以添加一个onTap属性
                  onTap:_selectDate,
                  child: Row(
                    children:<Widget>[
                      Text(DateFormat.yMd().format(selectedDate)),
                      Icon(Icons.arrow_drop_down),
                    ]
                  ),
                ),
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

15 showTimePicker：时间选择器

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';
class DateTimeDemo extends StatefulWidget {
  DateTimeDemo({Key key}) : super(key: key);

  @override
  _DateTimeDemo createState() => _DateTimeDemo();
}

class _DateTimeDemo extends State<DateTimeDemo> {

 DateTime selectedDate=DateTime.now();
 TimeOfDay selectedTime=TimeOfDay(hour: 9, minute: 30);

_selectDate() async {
  final DateTime date=await showDatePicker(
    context: context, 
    initialDate: selectedDate,//初始时间 
    firstDate: DateTime(1900), //可选择的最早日期
    lastDate: DateTime(2100)//可选择的未来期限
    );
  if(date== null)return;
  setState(() {
    selectedDate=date;
  });
}

_selectTime() async{
  final TimeOfDay time=await showTimePicker(
    context: context, 
    initialTime: selectedTime,
    );
    if(time==null)return;
    setState(() {
      selectedTime=time;
    });
}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DateTimeDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
           
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InkWell(//可以添加一个onTap属性
                  onTap:_selectDate,
                  child: Row(
                    children:<Widget>[
                      Text(DateFormat.yMd().format(selectedDate)),
                      Icon(Icons.arrow_drop_down),
                    ]
                  ),
                ),
                InkWell(//可以添加一个onTap属性
                  onTap:_selectTime,
                  child: Row(
                    children:<Widget>[
                      Text(selectedTime.format(context)),
                      Icon(Icons.arrow_drop_down),
                    ]
                  ),
                ),
                
              ],
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

16 Future：异步程序

如果程序里有一些接口需要花费一些时间去执行，比如读取文件等等，我们一般不会一直等待它完成。一般会让他先返回一个初始值，然后等他执行完了，再更新新的值。
async
在这里插入图片描述

煮酒Shae
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Flutter】Dart 中国身份证验证，出生日期、性别、年龄查询
qq_28391085的博客
07-08 2683
身份证号验证。需要手动引入国际化库intl import 'package:intl/intl.dart'; import 'age_util.dart' as ageUtil; ///@author: wangzhanhong ///纯数字正则匹配式 RegExp _pureDigital = RegExp('[0-9]*', multiLine: false); var _formatter = DateFormat("yyMMdd"); ///初步匹配年月日字段 RegExp _dateRegE
flutter杂记之时间格式化
qq_44756582的博客
07-18 682
flutter时间格式化 引入intl pubspec.yaml intl: ^0.16.1 代码如下： import 'package:intl/intl.dart'; class TimeFormat { static final formatStr = "yyyy-MM-dd"; static final formatter = new DateFormat(formatStr); static String millionsTimeToStr(int millionsTime)
Flutter开发之——国际化之Intl插件
最新发布
2401_84408814的博客
05-03 27
执行命令flutter pub getTool->Flutter Intl ->Initalize for the project成功后，自动在 pubspec.yaml末尾增加flutter_intl:enabled: true执行Flutter Intl->Initialize for the Project后，lib目录下生成generated和i10n文件夹文件说明：generated包下的intl目录默认生成 messages_all.dart 和 messages_en.dart 文件，mess
Flutter Intl的使用
明光的博客
07-15 7186
VSCode中Flutter Intl插件的使用
Flutter时间工具类封装
KingsleyCheng的博客
02-24 450
import 'package:intl/intl.dart'; ///关于时间工具 class DateUtils { static const String PARAM_FORMAT = "yyyy/MM/dd"; static const String PARAM_TIME_FORMAT = 'yyyy/MM/dd'; static const String PARAM_TIME_FORMAT_H = 'yyyy/MM/dd HH'; static const String PAR.
Flutter 使用intl实现国际化
倚栏静望的博客
04-24 5112
1.添加依赖 dependencies: #...省略无关项 intl: ^0.15.7 dev_dependencies: #...省略无关项 intl_translation: ^0.17.2 2.创建必要目录 首先，在项目根目录下创建一个i10n-arb目录，该目录保存我们接下来通过intl_translation命令生成的arb文件。一个简单的arb文件内容如下： ...
Flutter_Installer:Flutter Installer是使用Flutter built构建的Flutter安装程序
03-19
Flutter安装程序Flutter Installer是Flutter构建的Flutter安装程序 :blue_heart: :smiling_face_with_sunglasses: :victory_hand:特征使用GUI界面安装Flutter，对初学者和专家有帮助安装Flutter所需的软件，因此它是...
Flutter 项目：flutter的安装和环境配置
03-10
flutter
flutter-go：flutter开发者帮助APP，包含flutter常用140+组件的演示演示与中文文档
02-09
FlutterGo感谢大家一直以来对FlutterGo的支持与反馈。但是由于团队内部组织调整变更，很遗憾的宣布FlutterGo目前暂停维护。但是后期我们会再升级迭代FlutterGo新版本，也同时希望更多Flutter爱好者参与加入。简历...
awesome-flutter-showcase:有趣的演示演示，用flutter编写
05-13
很棒的Flutter展示柜 Flutter是Google的移动应用SDK，可在创纪录的时间内在iOS和Android上制作高质量的本机界面。 Flutter可与现有代码配合使用，为世界各地的开发人员和组织所使用，并且是免费的开放源代码。 这...
flutter_tts：颤振文本到语音包
02-02
文字转语音 轻巧的文本转语音插件（Swift，Java） ... 将使用Swift的插件集成到由Objective-C模板创建的Flutter项目中存在一个已知问题。 要使用此插件： 将依赖项添加到您的文件中。 dependencies :
tencentyun#intlcloud-documents#服务端 SDK_intl_zh1
07-25
除了 REST API 之外，移动推送 TPNS 还提供主流的服务端接口 SDK。官方维护官方维护的版本在【腾讯工蜂-tpns】上以开源的形式发布。官方插件地址
windows安装intl扩展
11-26
几个dll文件 扔到 windows system32 或者 SysWOW64下 开启 phpini 对应 intl 扩展 重启
FlutterResources:Flutter资源列表，可帮助人们开始使用Flutter
04-22
颤振资源 可以帮助人们开始使用Flutter的Free Flutter资源列表。 内容 贡献 支持我 介绍 Flutter是Google的UI工具包，用于通过单个代码库为移动设备，Web和桌面构建漂亮的，本机编译的应用程序 Flutter安装-在您的机器上安装Flutter入门 Flutter面向初学者-关于使用Flutter构建应用的YouTube播放列表 Dart for Beginners-有关Dart编程语言的Youtube播放列表 Flutter基础知识-教授基础知识并使用所学知识来创建Time应用程序的Youtube播放列表 Http Requests-一篇中等水平的文章，教如何向服务器发出http请求 很棒的Flutter Talk-是一个Github存储库，保存了2011年至2020年关于Flutter Talk的Youtube网址列表 初学者 每周小工具-Flutte
Flutter & Dart：用数字分组显示大数字
坚果的博客
11-11 1649
Flutter & Dart：用数字分组显示大数字 大家好，我是坚果，我的公众号“坚果前端”， 用逗号显示大数字作为千位分隔符将增加可读性。这篇简短的文章将向您展示如何借助intl包（由 Dart 团队发布）中的NumberFormat类在 Dart（以及 Flutter）中执行此操作。 通过执行以下命令将intl添加到您的项目中： dart pub add intl 例子 import 'package:flutter/material.dart'; import 'package:intl/
解决Flutter 国际化插件Intl导致TextFiled 的 pasteButtonLabel的一系列问题
倚栏静望的博客
07-19 2020
问题： 原因是
flutter 国际化flutter使用 intl插件，provider状态保存
ZhangWes的博客
07-18 1897
1.下载插件 2.插件下载完成后重启一下android studio,在工具栏tool中会多一个flutter intl的选项 3.点击initialize for project,等待项目生成语言包 其中.arb文件是我们不同语言包，放入需要翻译的字段；intl文件夹是自动生成的，放置的翻译好的dart文件，我们不用管理 4.如果要添加其他语言需要下面操作 创建之后的文件加目录 *打开.arb看下 恭喜准备工作完成 二、代码设置 1.在pubspec.yam
Flutter工具类（五） 国际化
qq_42795723的博客
09-27 690
国际化配置Flutter
flutter容器打包安装apk
02-14
如果你想打包flutter应用程序成APK格式并安装，可以运行以下步骤： 1. 打开终端/命令行窗口并进入到flutter项目的根目录。 2. 运行以下命令： ``` flutter build apk ``` 3. 等待打包过程完成，在项目的`build/...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值