《Flutter 从0到1构建大前端应用》读后感

Flutter 《从0到1构建大前端应用》-所有知识点架构

文章目录

一丶 shared_preferences 本地存储
二丶 SQLite数据库
三丶文件形式存储

一丶 shared_preferences 本地存储

导入第三方依赖： shared_preferences: ^0.5.1+1

1.shared_preferences 的常用操作
增

  SharedPreferences prefs = await SharedPreferences.getInstance();prefs.setString(key,value);

删

  SharedPreferences prefs = await SharedPreferences.getInstance();prefs.remove(key);

查

  SharedPreferences prefs = await SharedPreferences.getInstance();prefs.getString(key);

2.shared_preferences 举例

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';class SharedPreferencesPage extends StatefulWidget {SharedPreferencesPage({Key key, this.title}) : super(key: key);final String title;@override_SharedPreferencesPageState createState() => _SharedPreferencesPageState();
}class _SharedPreferencesPageState extends State<SharedPreferencesPage> {int _count = 0;     //数值@overridevoid initState() {      //初始化生命周期方法super.initState();_getCounter();}void _incrementCounter() async {SharedPreferences prefs = await SharedPreferences.getInstance();    //实例化 SharedPreferences对象int counter = (prefs.getInt("counter") ?? 0) + 1;   //取出值+1setState(() {   //更新页面_count = counter;});await prefs.setInt('counter', counter);   //保存值}_getCounter() async {SharedPreferences prefs = await SharedPreferences.getInstance();setState(() {_count = prefs.get('counter') ?? 0;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('点击数：' + _count.toString(),style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,     //点击悬浮按钮时tooltip: 'Increment',child: Icon(Icons.add),),);}
}

二丶 SQLite数据库

1.sqllite 依赖库简介
第三方库： sqflite: ^1.1.3

获取和删 database

在这里插入代码片

2.封装 SQL Helpers

db_helpers.dart

import 'dart:io';import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';final String tableUser = 'user';    //表名
final String columnId = '_id';      //id
final String columnName = 'name';   //用户名class User {int id;         //idString name;    //用户名Map<String, dynamic> toMap() {var map = <String, dynamic>{    //创建map数据，并赋值给用户名columnName: name,};if (id != null) {map[columnId] = id; //赋值给id}return map;}User();//从Map数据中取出对应值并赋值给实体bean的成员变量User.fromMap(Map<String, dynamic> map) {id = map[columnId];name = map[columnName];}
}class DBProvider {DBProvider._();static final DBProvider db = DBProvider._();    //数据库提供者Database _database;     //数据库Future<Database> get database async {if (_database != null) return _database;_database = await initDB();     //如果数据库不存在，则在建立table的同时创建数据库，若表存在数据库不可能不存在return _database;   //返回数据库}initDB() async {//目录对象 = 获取应用文件目录Directory documentsDirectory = await getApplicationDocumentsDirectory();//路径 = 加入（目录对象路径，表名）String path = join(documentsDirectory.path, "UserDB.db");//打开数据库（路径，版本，数据库）return await openDatabase(path, version: 1, onOpen: (db) {},onCreate: (Database db, int version) async {//创建表await db.execute('''                                        create table $tableUser ( $columnId integer primary key autoincrement, $columnName text not null)''');});}//插入数据Future<User> insert(User user) async {final db = await database;    //获取数据库对象//返回数据库存入的id = 插入(表名，Map类型（用来传入需要添加的字段名和对应的取值）)user.id = await db.insert(tableUser, user.toMap());return user;    //返回bean对象}//获取单个数据Future<User> getUser(int id) async {final db = await database;    //获取数据库对象//查询List<Map> maps = await db.query(tableUser,    //表名columns: [columnId, columnName],        //查询字段where: '$columnId = ?',                 //条件whereArgs: [id]);                       //where 子句的占位符参数值if (maps.length > 0) {    //若有数据return User.fromMap(maps.first);    //从Map数据中取出对应值}return null;}//获取全部数据Future<List<User>> getAllUser() async {final db = await database;        //获取数据库对象var res = await db.query("User");   //表名List<User> list =res.isNotEmpty ? res.map((c) => User.fromMap(c)).toList() : []; //isNotEmpty 不为空return list;}//删除数据Future<int> delete(int id) async {final db = await database;     //获取数据库对象return await db.delete(tableUser, where: '$columnId = ?', whereArgs: [id]);}//更新数据Future<int> update(User user) async {final db = await database;      //获取数据库对象return await db.update(tableUser, user.toMap(),     //表名，Map<修改字段，对应值>where: '$columnId = ?', whereArgs: [user.id]);  //id = 占位符，where字句占位符所对应的值}//删除所有数据（删除表）removeAll() async {final db = await database;     //获取数据库对象db.delete(tableUser);     //删除表}//关闭资源Future close() async {final db = await database;  //获取数据库对象db.close(); //关闭}
}

3.sqllite 实现员工打卡实例

数据库封装类在上面：db_helpers.dart

CheckInPage.dart

import 'package:flutter/material.dart';
import 'package:flutter_store/check_in_result.dart';
import 'package:flutter_store/db_helpers.dart';
import 'package:shared_preferences/shared_preferences.dart';class CheckInPage extends StatefulWidget {CheckInPage({Key key, this.title}) : super(key: key);final String title;@override_CheckInPageState createState() => _CheckInPageState();
}class _CheckInPageState extends State<CheckInPage> {final TextEditingController textTitleEditingController =    //文本编辑器对象new TextEditingController();_save() {User user = User();   //实例化实体beanuser.name = textTitleEditingController.text;  //bean.用户名=得到文本编辑器的内容DBProvider.db.insert(user);   //插入数据Navigator.of(context).push(         //跳转到 CheckInResult 页面new MaterialPageRoute(builder: (context) {return new CheckInResult();},),);}_removeData() {     //清除所有数据DBProvider.db.removeAll();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(children: <Widget>[TextField(      //文本域controller: textTitleEditingController,   //控制者autofocus: true,    //自动对焦decoration: new InputDecoration(    //装饰：输入装饰hintText: '请输入用户名',),),RaisedButton(child: Text('保存'),onPressed: _save,     //保存数据),RaisedButton(child: Text('清除数据'),onPressed: _removeData,)],)),);}
}

CheckInResult.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_store/db_helpers.dart';class CheckInResult extends StatelessWidget {CheckInResult({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("已打卡人员")),body: FutureBuilder<List<User>>(    //未来建造者（List集合（bean对象））future: DBProvider.db.getAllUser(), //未来：得到所有数据（future类型）//上下文对象，异步数据      这个数据一定是先拿到了全部数据，才会执行下面的方法builder: (BuildContext context, AsyncSnapshot<List<User>> snapshot) {if (snapshot.hasData) {       //若数据库中有数据return ListView.builder(itemCount: snapshot.data.length,  //数据长度//每一个item：（上下文对象，  下标）itemBuilder: (BuildContext context, int index) {User item = snapshot.data[index];   //取出每一个bean对象return ListTile(title: Text(item.name), //用户名);},);} else {return Center(child: CircularProgressIndicator());    //若没数据：显示圆形进度指示器}},),);}
}

三丶文件形式存储

1.path_provider简介

第三方库： path_provider: ^0.5.0+1

【1】获取临时目录

 Directory tempDir = await getTemporaryDirect();String tempPath = tempDir.path;

【2】获取应用文档目录

 Directory appDocDir = await getApplicationDocumentsDirectory();String appDocPath = appDocDir.path;

【3】获取外部存储目录

 Directory externalDir = await getExternalStorageDirectory();String externalPath = externalDir.path;

注意：iOS 平台上没有外部存储目录的概念，这一点在实际开发中需要注意并区分

2.一个简单的日记本示例

import 'dart:io';import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';class FileProviderPage extends StatefulWidget {final InfoStorage storage;      //信息存储final String title;             //标题FileProviderPage({Key key, this.title, this.storage}) : super(key: key);@override_FileProviderPageState createState() => _FileProviderPageState();
}class _FileProviderPageState extends State<FileProviderPage> {final TextEditingController textTitleEditingController =    //文本编辑器对象new TextEditingController();String _info;@overridevoid initState() {    //初始化生命周期函数super.initState();widget.storage.readInfo().then((String info) {  //获取指定文件数据setState(() {     //更新页面_info = info;});});}//保存Future<File> _saveInfo() async {setState(() {   //先更新页面_info = textTitleEditingController.text;});return widget.storage.writeInfo(_info);   //将新数据写入文件中}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('一个简单的日记本')),body: Column(children: <Widget>[TextField(controller: textTitleEditingController, //控制者autofocus: true,    //自动对焦decoration: new InputDecoration(    //装饰：输入装饰hintText: _info,),),RaisedButton(child: Text('保存'),onPressed: _saveInfo,),Text(_info ?? ""),],),);}
}class InfoStorage {Future<String> get _localPath async {final directory = await getApplicationDocumentsDirectory(); // 目录对象 = 得到应用文件目录return directory.path;    //目录路径}//得到本地存储文件Future<File> get _localFile async {final path = await _localPath;    //得到本地存储路径return File('$path/info.txt');  //打开文件（目录路径/文件名）}Future<String> readInfo() async {try {final file = await _localFile;    //得到本地存储对象String info = await file.readAsString();  //读取文件数据，返回值是字符串print(info);    //控制台打印return info;    //返回读取文件的字符串结果} catch (e) {return "error"; //如果有异常，则返回error}}Future<File> writeInfo(String info) async {final file = await _localFile;  //得到本地存储对象return file.writeAsString(info);  //写入数据}
}

《Flutter 从0到1构建大前端应用》读后感—第8章【持久化】相关推荐

flutter从0到1构建大前端应用 pdf_前端骨架屏都是如何生成的
作者:SHERlocked93 转发链接:https://mp.weixin.qq.com/s/j2XzwLPnalDCNaKkfjH-0Q 前言相比于早些年前后端代码紧密耦合.后端工程师还得写前端 ...
flutter从0到1构建大前端应用 pdf_推荐前端热门GitHub代码库「值得收藏」
作者:刘小夕前端宇宙转发链接:https://mp.weixin.qq.com/s/Ypl3K2wVd_NrgCg_zogngA
Flutter从0到1构建大前端应用（一）：Dart环境配置及基础语法
文章目录代序环境搭建使用国内镜像 windowsDart环境变量配置教程 windows flutter环境变量配置教程 1.解压flutter-sdk到任意目录 2.配置flutter-sdk ...
Flutter从0到1构建大前端应用（四）：组件
文章目录前言阅读建议正文 MaterialApp 属性 Demo 效果展示 Scaffold 属性 Demo 效果展示 Container 基本用法 Demo 效果演示 Text 属性表: De ...
从0到1构建大促运营活动
从0到1构建大促运营活动前言一.需求背景依托流量平台拉新业务促活二.需求分析 2.1 运营玩法分析 2.2 业务需求分析 2.3 领域对象识别 2.4 业务场景拆分三.任务拆解四.研发 ...
从0到1构建大数据生态系列1：数据蛮荒中的拓荒之举
缘起我们都知道,当前大数据的需求基本属于遍地开花.无论是帝都.魔都,还是广州.深圳,亦或是全国其他各地,都在搞大数据:不管是不到百人的微小公司,还是几百上千人的中型公司,亦或是上万的大型公司,都在需 ...
Flutter 快速上手，秒变大前端
简介:近两年Flutter的热度不断提升,无论在阿里还是外部公司,参与Flutter生态建设的人越来越多.Flutter作为跨端的UI框架,未来也有很大的可能像Rax一样作为集团内营销活动页面搭建的D ...
火了几年的大前端，现在怎么样了？
大概从2017年开始,大前端这个名词开始出现,infoQ的一些技术大会也开始设置大前端议题,react native火的一塌糊涂,阿里.京东.去哪儿也开始推出自己的跨平台实践.时至今日,大前端已经发展 ...
大前端时代的乱流：带你了解最全面的 Flutter Web
Flutter Web 稳定版本发布至今也有一年多了,经过这一年多的发展,今天就让我们来看看作为大前端时代的乱流,Flutter Web 究竟有什么不同之处,本篇分享主要内容是目前 Flutter 下 ...
Flutter快学快用开篇词通往大前端的一把关键钥匙 Flutter
你好,欢迎来到 Flutter 课程,我是清弦. 近 10 年来,我一直在一线大厂从事 Web 前端研发工作,负责前端.中台业务以及跨端平台的研发和团队管理.目前大前端因为"一套代码,多端运 ...

《Flutter 从0到1构建大前端应用》读后感—第8章【持久化】

文章目录

一丶 shared_preferences 本地存储

二丶 SQLite数据库

三丶文件形式存储

《Flutter 从0到1构建大前端应用》读后感—第8章【持久化】相关推荐

最新文章

热门文章

《Flutter 从0到1构建大前端应用》读后感—第8章【持久化】

文章目录

一丶 shared_preferences 本地存储

二丶 SQLite数据库

三丶 文件形式存储

《Flutter 从0到1构建大前端应用》读后感—第8章【持久化】相关推荐

最新文章

热门文章

三丶文件形式存储