扫码一下
查看教程更方便
教程 > flutter 教程 >
阅读：40
flutter 编写高级应用程序——迹忆客-ag捕鱼王app官网
在本章中，我们将学习如何编写一个成熟的移动应用程序，expense_calculator。 费用计算器的目的是存储我们的费用信息。 该应用程序的完整功能如下
- 费用清单。
- 输入新费用的表格。
- 编辑/删除现有费用的选项。
- 任何情况下的总费用。
我们将使用下面提到的 flutter 框架的高级功能对费用计算器应用程序进行编程。
- 高级使用 listview 来显示费用清单。
- 表单编程。
- sqlite 数据库编程来存储我们的开支。
- scoped_model 状态管理来简化我们的编程。
让我们开始编写费用计算器应用程序。
- 在 android studio 中创建一个新的 flutter 应用程序费用计算器。
- 打开 pubspec.yaml 并添加包依赖项。
dependencies:
flutter:
sdk: flutter
sqflite: ^1.1.0
path_provider: ^0.5.0 1
scoped_model: ^1.0.1
intl: any
在这里观察这些要点
- sqflite 用于 sqlite 数据库编程。
- path_provider 用于获取系统特定的应用程序路径。
- scoped_model 用于状态管理。
- intl 用于日期格式。
android studio 将显示以下警告，表明 pubspec.yaml 已更新。
单击获取依赖项选项。android studio 将从 internet 获取包并为应用程序正确配置它。
删除 main.dart 中的现有代码。
添加新文件 expense.dart 以创建 expense 类。费用类将具有以下属性和方法。
- property: id - 表示 sqlite 数据库中费用条目的唯一 id。
- property: amount - 花费的金额。
- property: date - 花费金额的日期。
- property: category - 类别表示花费金额的区域。例如美食、旅游等，
- formatteddate - 用于格式化日期属性
- frommap - 用于将数据库表中的字段映射到费用对象中的属性并创建一个新的费用对象。
factory expense.frommap(map - tomap - 用于将费用对象转换为 dart map，可进一步用于数据库编程
map - columns - 用于表示数据库字段的静态变量。
输入以下代码并将其保存到 expense.dart 文件中。
import 'package:intl/intl.dart'; class expense {
final int id;
final double amount;
final datetime date;
final string category;
string get formatteddate {
var formatter = new dateformat('yyyy-mm-dd');
return formatter.format(this.date);
}
static final columns = ['id', 'amount', 'date', 'category'];
expense(this.id, this.amount, this.date, this.category);
factory expense.frommap(map data) {
return expense(
data['id'],
data['amount'],
datetime.parse(data['date']), data['category']
);
}
map tomap() => {
"id" : id,
"amount" : amount,
"date" : date.tostring(),
"category" : category,
};
}
上面的代码很简单，不言自明。
添加新文件 database.dart 以创建 sqlitedbprovider 类。sqlitedbprovider 类的目的如下 -
使用 getallexpenses 方法获取数据库中可用的所有费用。它将用于列出所有用户的费用信息。
future> getallexpenses() async {
final db = await database;
list 使用 getexpensebyid 方法根据数据库中可用的费用标识获取特定的费用信息。它将用于向用户显示特定的费用信息。
future getexpensebyid(int id) async {
final db = await database;
var result = await db.query("expense", where: "id = ", whereargs: [id]);
return result.isnotempty ?
expense.frommap(result.first) : null;
}
使用 gettotalexpense 方法获取用户的总支出。它将用于向用户显示当前的总费用。
future gettotalexpense() async {
final db = await database;
list 使用 insert 方法将新的费用信息添加到数据库中。它将用于由用户将新的费用条目添加到应用程序中。
future insert(expense expense) async {
final db = await database;
var maxidresult = await db.rawquery(
"select max(id) 1 as last_inserted_id from expense"
);
var id = maxidresult.first["last_inserted_id"];
var result = await db.rawinsert(
"insert into expense (id, amount, date, category)"
" values (?, ?, ?, ?)", [
id, expense.amount, expense.date.tostring(), expense.category
]
);
return expense(id, expense.amount, expense.date, expense.category);
}
使用更新方法更新现有费用信息。它将用于编辑和更新用户在系统中可用的现有费用条目。
update(expense product) async {
final db = await database;
var result = await db.update("expense", product.tomap(),
where: "id = ?", whereargs: [product.id]);
return result;
}
使用删除方法删除现有费用信息。它将用于删除用户在系统中可用的现有费用条目。
delete(int id) async {
final db = await database;
db.delete("expense", where: "id = ?", whereargs: [id]);
}
sqlitedbprovider 类的完整代码如下 -
import 'dart:async';
import 'dart:io';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'expense.dart';
class sqlitedbprovider {
sqlitedbprovider._();
static final sqlitedbprovider db = sqlitedbprovider._();
static database _database; future get database async {
if (_database != null)
return _database;
_database = await initdb();
return _database;
}
initdb() async {
directory documentsdirectory = await getapplicationdocumentsdirectory();
string path = join(documentsdirectory.path, "expensedb2.db");
return await opendatabase(
path, version: 1, onopen:(db){}, oncreate: (database db, int version) async {
await db.execute(
"create table expense (
""id integer primary key," "amount real," "date text," "category text""
)
");
await db.execute(
"insert into expense ('id', 'amount', 'date', 'category')
values (?, ?, ?, ?)",[1, 1000, '2019-04-01 10:00:00', "food"]
);
/*await db.execute(
"insert into product ('id', 'name', 'description', 'price', 'image')
values (?, ?, ?, ?, ?)", [
2, "pixel", "pixel is the most feature phone ever", 800, "pixel.png"
]
);
await db.execute(
"insert into product ('id', 'name', 'description', 'price', 'image')
values (?, ?, ?, ?, ?)", [
3, "laptop", "laptop is most productive development tool", 2000, "laptop.png"
]
);
await db.execute(
"insert into product ('id', 'name', 'description', 'price', 'image')
values (?, ?, ?, ?, ?)", [
4, "tablet", "laptop is most productive development tool", 1500, "tablet.png"
]
);
await db.execute(
"insert into product ('id', 'name', 'description', 'price', 'image')
values (?, ?, ?, ?, ?)", [
5, "pendrive", "iphone is the stylist phone ever", 100, "pendrive.png"
]
);
await db.execute(
"insert into product ('id', 'name', 'description', 'price', 'image')
values (?, ?, ?, ?, ?)", [
6, "floppy drive", "iphone is the stylist phone ever", 20, "floppy.png"
]
); */
}
);
}
future> getallexpenses() async {
final db = await database;
list 这里，
- database 是获取 sqlitedbprovider 对象的属性。
- initdb 是一种用于选择和打开 sqlite 数据库的方法。
创建一个新文件 expenselistmodel.dart 以创建 expenselistmodel。该模型的目的是将用户费用的完整信息保存在内存中，并在内存中用户费用发生变化时更新应用程序的用户界面。它基于 scoped_model 包中的 model 类。它具有以下属性和方法 -
- _items - 私人费用清单。
- items - _items 作为
unmodifiablelistview的获取器，以防止对列表进行意外或意外更改。 - totalexpense - 基于 items 变量的总费用的获取器。
double get totalexpense {
double amount = 0.0;
for(var i = 0; i < _items.length; i ) {
amount = amount _items[i].amount;
}
return amount;
}
- load - 用于从数据库加载全部费用并放入
_items变量。它还调用 notifylisteners 来更新 ui。
void load() {
future>
list = sqlitedbprovider.db.getallexpenses();
list.then( (dbitems) {
for(var i = 0; i < dbitems.length; i ) {
_items.add(dbitems[i]);
} notifylisteners();
});
}
- byid - 用于从
_items变量中获取特定费用。
expense byid(int id) {
for(var i = 0; i < _items.length; i ) {
if(_items[i].id == id) {
return _items[i];
}
}
return null;
}
- add - 用于将新的费用项目添加到
_items变量以及数据库中。它还调用 notifylisteners 来更新 ui。
void add(expense item) {
sqlitedbprovider.db.insert(item).then((val) {
_items.add(val); notifylisteners();
});
}
- update - 用于将费用项目更新到
_items变量以及数据库中。它还调用 notifylisteners 来更新 ui。
void update(expense item) {
bool found = false;
for(var i = 0; i < _items.length; i ) {
if(_items[i].id == item.id) {
_items[i] = item;
found = true;
sqlitedbprovider.db.update(item); break;
}
}
if(found) notifylisteners();
}
- delete - 用于删除
_items变量以及数据库中的现有费用项目。它还调用 notifylisteners 来更新 ui。
void delete(expense item) {
bool found = false;
for(var i = 0; i < _items.length; i ) {
if(_items[i].id == item.id) {
found = true;
sqlitedbprovider.db.delete(item.id);
_items.removeat(i); break;
}
}
if(found) notifylisteners();
}
expenselistmodel 类的完整代码如下 -
import 'dart:collection';
import 'package:scoped_model/scoped_model.dart';
import 'expense.dart';
import 'database.dart';
class expenselistmodel extends model {
expenselistmodel() {
this.load();
}
final list _items = [];
unmodifiablelistview get items =>
unmodifiablelistview(_items);
/*future get totalexpense {
return sqlitedbprovider.db.gettotalexpense();
}*/
double get totalexpense {
double amount = 0.0;
for(var i = 0; i < _items.length; i ) {
amount = amount _items[i].amount;
}
return amount;
}
void load() {
future> list = sqlitedbprovider.db.getallexpenses();
list.then( (dbitems) {
for(var i = 0; i < dbitems.length; i ) {
_items.add(dbitems[i]);
}
notifylisteners();
});
}
expense byid(int id) {
for(var i = 0; i < _items.length; i ) {
if(_items[i].id == id) {
return _items[i];
}
}
return null;
}
void add(expense item) {
sqlitedbprovider.db.insert(item).then((val) {
_items.add(val);
notifylisteners();
});
}
void update(expense item) {
bool found = false;
for(var i = 0; i < _items.length; i ) {
if(_items[i].id == item.id) {
_items[i] = item;
found = true;
sqlitedbprovider.db.update(item);
break;
}
}
if(found) notifylisteners();
}
void delete(expense item) {
bool found = false;
for(var i = 0; i < _items.length; i ) {
if(_items[i].id == item.id) {
found = true;
sqlitedbprovider.db.delete(item.id);
_items.removeat(i); break;
}
}
if(found) notifylisteners();
}
}
打开 main.dart 文件。导入如下指定的类 -
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'expenselistmodel.dart';
import 'expense.dart';
添加主函数并通过传递 scopedmodel 小部件调用 runapp。
void main() {
final expenses = expenselistmodel();
runapp(
scopedmodel(model: expenses, child: myapp(),)
);
}
这里，
- 费用对象从数据库中加载所有用户费用信息。此外，当应用程序第一次打开时，它将创建具有适当表的所需数据库。
- scopedmodel 提供应用程序整个生命周期的费用信息，并确保在任何情况下都可以维护应用程序的状态。它使我们能够使用 statelesswidget 而不是 statefulwidget。
使用 materialapp 小部件创建一个简单的 myapp。
class myapp extends statelesswidget {
// this widget is the root of your application.
@override
widget build(buildcontext context) {
return materialapp(
title: 'expense',
theme: themedata(
primaryswatch: colors.blue,
),
home: myhomepage(title: 'expense calculator'),
);
}
}
创建 myhomepage 小部件以在顶部显示所有用户的费用信息以及总费用。右下角的浮动按钮将用于添加新费用。
class myhomepage extends statelesswidget {
myhomepage({key key, this.title}) : super(key: key);
final string title;
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text(this.title),
),
body: scopedmodeldescendant(
builder: (context, child, expenses) {
return listview.separated(
itemcount: expenses.items == null ? 1
: expenses.items.length 1,
itembuilder: (context, index) {
if (index == 0) {
return listtile(
title: text("total expenses: "
expenses.totalexpense.tostring(),
style: textstyle(fontsize: 24,
fontweight: fontweight.bold),)
);
} else {
index = index - 1;
return dismissible(
key: key(expenses.items[index].id.tostring()),
ondismissed: (direction) {
expenses.delete(expenses.items[index]);
scaffold.of(context).showsnackbar(
snackbar(
content: text(
"item with id, "
expenses.items[index].id.tostring()
" is dismissed"
)
)
);
},
child: listtile( ontap: () {
navigator.push(
context, materialpageroute(
builder: (context) => formpage(
id: expenses.items[index].id,
expenses: expenses,
)
)
);
},
leading: icon(icons.monetization_on),
trailing: icon(icons.keyboard_arrow_right),
title: text(expenses.items[index].category ": "
expenses.items[index].amount.tostring()
" \nspent on " expenses.items[index].formatteddate,
style: textstyle(fontsize: 18, fontstyle: fontstyle.italic),))
);
}
},
separatorbuilder: (context, index) {
return divider();
},
);
},
),
floatingactionbutton: scopedmodeldescendant(
builder: (context, child, expenses) {
return floatingactionbutton( onpressed: () {
navigator.push(
context, materialpageroute(
builder: (context) => scopedmodeldescendant(
builder: (context, child, expenses) {
return formpage( id: 0, expenses: expenses, );
}
)
)
);
// expenses.add(new expense(
// 2, 1000, datetime.parse('2019-04-01 11:00:00'), 'food')
);
// print(expenses.items.length);
},
tooltip: 'increment', child: icon(icons.add), );
}
)
);
}
}
这里，
- scopedmodeldescendant 用于将费用模型传递给 listview 和 floatingactionbutton 小部件。
- listview.separated 和 listtile 小部件用于列出费用信息。
- dismissible 小部件用于使用滑动手势删除费用条目。
导航器用于打开费用条目的编辑界面。可以通过点击费用条目来激活它。
创建一个 formpage 小部件。formpage 小部件的目的是添加或更新费用条目。它还处理费用条目验证。
class formpage extends statefulwidget {
formpage({key key, this.id, this.expenses}) : super(key: key);
final int id;
final expenselistmodel expenses;
@override _formpagestate createstate() => _formpagestate(id: id, expenses: expenses);
}
class _formpagestate extends state {
_formpagestate({key key, this.id, this.expenses});
final int id;
final expenselistmodel expenses;
final scaffoldkey = globalkey();
final formkey = globalkey();
double _amount;
datetime _date;
string _category;
void _submit() {
final form = formkey.currentstate;
if (form.validate()) {
form.save();
if (this.id == 0) expenses.add(expense(0, _amount, _date, _category));
else expenses.update(expense(this.id, _amount, _date, _category));
navigator.pop(context);
}
}
@override
widget build(buildcontext context) {
return scaffold(
key: scaffoldkey, appbar: appbar(
title: text('enter expense details'),
),
body: padding(
padding: const edgeinsets.all(16.0),
child: form(
key: formkey, child: column(
children: [
textformfield(
style: textstyle(fontsize: 22),
decoration: const inputdecoration(
icon: const icon(icons.monetization_on),
labeltext: 'amount',
labelstyle: textstyle(fontsize: 18)
),
validator: (val) {
pattern pattern = r'^[1-9]\d*(\.\d )?$';
regexp regex = new regexp(pattern);
if (!regex.hasmatch(val))
return 'enter a valid number'; else return null;
},
initialvalue: id == 0
? '' : expenses.byid(id).amount.tostring(),
onsaved: (val) => _amount = double.parse(val),
),
textformfield(
style: textstyle(fontsize: 22),
decoration: const inputdecoration(
icon: const icon(icons.calendar_today),
hinttext: 'enter date',
labeltext: 'date',
labelstyle: textstyle(fontsize: 18),
),
validator: (val) {
pattern pattern = r'^((?:19|20)\d\d)[- /.]
(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$';
regexp regex = new regexp(pattern);
if (!regex.hasmatch(val))
return 'enter a valid date';
else return null;
},
onsaved: (val) => _date = datetime.parse(val),
initialvalue: id == 0
? '' : expenses.byid(id).formatteddate,
keyboardtype: textinputtype.datetime,
),
textformfield(
style: textstyle(fontsize: 22),
decoration: const inputdecoration(
icon: const icon(icons.category),
labeltext: 'category',
labelstyle: textstyle(fontsize: 18)
),
onsaved: (val) => _category = val,
initialvalue: id == 0 ? ''
: expenses.byid(id).category.tostring(),
),
raisedbutton(
onpressed: _submit,
child: new text('submit'),
),
],
),
),
),
);
}
}
这里，
- textformfield 用于创建表单条目。
- textformfield 的验证器属性用于验证表单元素以及正则表达式模式。
_submit 函数与费用对象一起用于将费用添加或更新到数据库中。
main.dart 文件的完整代码如下 -
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'expenselistmodel.dart';
import 'expense.dart';
void main() {
final expenses = expenselistmodel();
runapp(
scopedmodel(
model: expenses, child: myapp(),
)
);
}
class myapp extends statelesswidget {
// this widget is the root of your application.
@override
widget build(buildcontext context) {
return materialapp(
title: 'expense',
theme: themedata(
primaryswatch: colors.blue,
),
home: myhomepage(title: 'expense calculator'),
);
}
}
class myhomepage extends statelesswidget {
myhomepage({key key, this.title}) : super(key: key);
final string title;
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text(this.title),
),
body: scopedmodeldescendant(
builder: (context, child, expenses) {
return listview.separated(
itemcount: expenses.items == null ? 1
: expenses.items.length 1, itembuilder: (context, index) {
if (index == 0) {
return listtile( title: text("total expenses: "
expenses.totalexpense.tostring(),
style: textstyle(fontsize: 24,fontweight:
fontweight.bold),) );
} else {
index = index - 1; return dismissible(
key: key(expenses.items[index].id.tostring()),
ondismissed: (direction) {
expenses.delete(expenses.items[index]);
scaffold.of(context).showsnackbar(
snackbar(
content: text(
"item with id, "
expenses.items[index].id.tostring()
" is dismissed"
)
)
);
},
child: listtile( ontap: () {
navigator.push( context, materialpageroute(
builder: (context) => formpage(
id: expenses.items[index].id, expenses: expenses,
)
));
},
leading: icon(icons.monetization_on),
trailing: icon(icons.keyboard_arrow_right),
title: text(expenses.items[index].category ": "
expenses.items[index].amount.tostring() " \nspent on "
expenses.items[index].formatteddate,
style: textstyle(fontsize: 18, fontstyle: fontstyle.italic),))
);
}
},
separatorbuilder: (context, index) {
return divider();
},
);
},
),
floatingactionbutton: scopedmodeldescendant(
builder: (context, child, expenses) {
return floatingactionbutton(
onpressed: () {
navigator.push(
context, materialpageroute(
builder: (context)
=> scopedmodeldescendant(
builder: (context, child, expenses) {
return formpage( id: 0, expenses: expenses, );
}
)
)
);
// expenses.add(
new expense(
// 2, 1000, datetime.parse('2019-04-01 11:00:00'), 'food'
)
);
// print(expenses.items.length);
},
tooltip: 'increment', child: icon(icons.add),
);
}
)
);
}
}
class formpage extends statefulwidget {
formpage({key key, this.id, this.expenses}) : super(key: key);
final int id;
final expenselistmodel expenses;
@override
_formpagestate createstate() => _formpagestate(id: id, expenses: expenses);
}
class _formpagestate extends state {
_formpagestate({key key, this.id, this.expenses});
final int id;
final expenselistmodel expenses;
final scaffoldkey = globalkey();
final formkey = globalkey();
double _amount; datetime _date;
string _category;
void _submit() {
final form = formkey.currentstate;
if (form.validate()) {
form.save();
if (this.id == 0) expenses.add(expense(0, _amount, _date, _category));
else expenses.update(expense(this.id, _amount, _date, _category));
navigator.pop(context);
}
}
@override
widget build(buildcontext context) {
return scaffold(
key: scaffoldkey, appbar: appbar(
title: text('enter expense details'),
),
body: padding(
padding: const edgeinsets.all(16.0),
child: form(
key: formkey, child: column(
children: [
textformfield(
style: textstyle(fontsize: 22),
decoration: const inputdecoration(
icon: const icon(icons.monetization_on),
labeltext: 'amount',
labelstyle: textstyle(fontsize: 18)
),
validator: (val) {
pattern pattern = r'^[1-9]\d*(\.\d )?$';
regexp regex = new regexp(pattern);
if (!regex.hasmatch(val)) return 'enter a valid number';
else return null;
},
initialvalue: id == 0 ? ''
: expenses.byid(id).amount.tostring(),
onsaved: (val) => _amount = double.parse(val),
),
textformfield(
style: textstyle(fontsize: 22),
decoration: const inputdecoration(
icon: const icon(icons.calendar_today),
hinttext: 'enter date',
labeltext: 'date',
labelstyle: textstyle(fontsize: 18),
),
validator: (val) {
pattern pattern = r'^((?:19|20)\d\d)[- /.]
(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$';
regexp regex = new regexp(pattern);
if (!regex.hasmatch(val)) return 'enter a valid date';
else return null;
},
onsaved: (val) => _date = datetime.parse(val),
initialvalue: id == 0 ? '' : expenses.byid(id).formatteddate,
keyboardtype: textinputtype.datetime,
),
textformfield(
style: textstyle(fontsize: 22),
decoration: const inputdecoration(
icon: const icon(icons.category),
labeltext: 'category',
labelstyle: textstyle(fontsize: 18)
),
onsaved: (val) => _category = val,
initialvalue: id == 0 ? '' : expenses.byid(id).category.tostring(),
),
raisedbutton(
onpressed: _submit,
child: new text('submit'),
),
],
),
),
),
);
}
}
现在，运行应用程序。
使用浮动按钮添加新费用。
通过点击费用条目来编辑现有费用。
通过在任一方向滑动费用条目来删除现有费用。
该应用程序的一些屏幕截图如下
