[英]How to apply MVC or design pattern in flutter?
我正在嘗試使用local_auth
package 包括生物特征認證。 這在應用程序啟動時使用。 指紋用於確定用戶是否是手機的所有者。 如果確認,他們將被帶到主頁。 下面的代碼有效,但我想在下面的代碼上應用的是MVC
或design pattern
。 有人可以指導我嗎?
class LoginOptionState extends State<LoginOption> {
final LocalAuthentication auth = LocalAuthentication();
String _authorized = 'Not Authorized';
@override
Widget build(BuildContext context) {
return Scaffold(
body: new Container(
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
Text("Touch ID"),
SizedBox(height: 10),
GestureDetector(
child: Image.asset(
"assets/",
),
onTap: _authenticate),
],
),
],
),
)));
}
Future<void> _authenticate() async {
bool authenticated = false;
try {
authenticated = await auth.authenticateWithBiometrics(
localizedReason: 'Scan your fingerprint to authenticate',
useErrorDialogs: true,
stickyAuth: false);
} on PlatformException catch (e) {
print(e);
}
if (!mounted) return;
setState(() {
_authorized = authenticated
? Navigator.pushNamed(context, homePageViewRoute)
: 'Not Authorized';
});
}
}
使用 Greg Perry mvc_pattern的優秀庫。 鏈接上提供了快速啟動示例代碼和說明。
正如這里所建議的,是經典計數器應用程序的快速啟動示例,來自上面的鏈接:
風景:
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
// Fields in a Widget subclass are always marked "final".
static final String title = 'Flutter Demo Home Page';
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final Controller _con = Controller.con;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
widget.title,
),
Text(
'${_con.counter}',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(
_con.incrementCounter
);
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Controller class:
class Controller extends ControllerMVC {
/// Singleton Factory
factory Controller() {
if (_this == null) _this = Controller._();
return _this;
}
static Controller _this;
Controller._();
/// Allow for easy access to 'the Controller' throughout the application.
static Controller get con => _this;
int get counter => _counter;
int _counter = 0;
void incrementCounter() => _counter++;
}
現在重構上面的代碼,添加一個 model:
int get counter => Model.counter;
void incrementCounter() {
/// The Controller knows how to 'talk to' the Model. It knows the name, but Model does the work.
Model._incrementCounter();
}
最后是 model class:
class Model {
static int get counter => _counter;
static int _counter = 0;
static int _incrementCounter() => ++_counter;
}
但是請確保將 flutter 升級到版本 1.13.0。 至少對我來說,我在較低版本中遇到了幾個構建錯誤。
Karee 是一套在 Flutter 中實現 MVC 設計的工具。 它可以幫助您管理控制器、路線、屏幕等。 請參閱 karee github wiki 以獲取文檔。
您可以使用Karee 。 支持Flutter 2.XX
要安裝運行npm install -g karee
然后 karee karee create
在基於 Karee 創建一個新的 Flutter 項目后,您可以添加新的 controller
示例代碼
創建à新的controller
Karee generate --controller --path auth Authentication
lib/app/controllers/auth/AuthenticationController下生成的文件
@Controller
class AuthenticationController {
login(username, password) {
/// Your custom code
}
}
添加路線
Route.on('/login', 'AuthenticationController@login');
在您的屏幕中使用
var authUser = KareeRouter.goto('/login', parameter:[username, password]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.