从颤振的中心位置管理路由和状态

Question

我有一个简单的flutter应用程序，它只由两个链接到main((函数中定义的路由器的页面组成。然而，我想将我的类隔离到它们自己的文件中，因为我的应用程序由许多页面组成。这是我的代码

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Named Routes',
initialRoute: '/',
routes: {
'/': (context) => const firstRoute(),
'/second': (context) => const secondRoute(),
},
));
}
// ignore: camel_case_types
class firstRoute extends StatelessWidget {
const firstRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GFG First Route'),
backgroundColor: Colors.green,
),
body: Center(
child: ElevatedButton(
child: const Text('Launch screen'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
), // Elevated
// RaisedButton is deprecated now
// child: RaisedButton(
// child: const Text('Launch screen'),
// onPressed: () {
//   Navigator.pushNamed(context, '/second');
// },
// ),
),
);
}
}
// ignore: camel_case_types
class secondRoute extends StatelessWidget {
const secondRoute({Key? key}) : super(key: key);
@override
// ignore: dead_code
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("GFG Second Route"),
backgroundColor: Colors.green,
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Go back!'),
), // ElevatedButton
),
// RaisedButton is deprecated now
// child: RaisedButton(
// onPressed: () {
//   Navigator.pop(context);
// },
// child: const Text('Go back!'),
// ),
);
}
}

如何将我的每个类隔离在单独的.dart文件中，同时仍然使用main中定义的路由？

此外，我希望在我将创建的每个dart文件中都能访问一些全局状态。我该如何解决第一个和第二个问题？。

Answer 1

您可以将当前代码分成3个文件。

1:main.dart

import 'package:flutter/material.dart';
import 'package:<app_name>/screens/firstRoute.dart';
import 'package:<app_name>/screens/secondRoute.dart';
// this is a globally available variable
final valueNotifier = ValueNotifier('hello');
void main() {
runApp(MaterialApp(
title: 'Named Routes',
initialRoute: '/',
routes: {
'/': (context) => const firstRoute(),
'/second': (context) => const secondRoute(),
},
));
}

2:firstFile.dart

class firstRoute extends StatelessWidget {
const firstRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GFG First Route'),
backgroundColor: Colors.green,
),
body: Center(
child: ElevatedButton(
child: const Text('Launch screen'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}

3:secondFile.dart

// imported main.dart so that we can use valueNotifier
import 'package:<app_name>/main.dart';
import 'package:flutter/material.dart';
class secondRoute extends StatelessWidget {
secondRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("GFG Second Route"),
backgroundColor: Colors.green,
),
body: Column(children: [
ValueListenableBuilder(
valueListenable: valueNotifier,
builder: ((BuildContext context, String updatedValue, Widget? child) {
return Text(updatedValue);
}),
),
Center(
child: ElevatedButton(
onPressed: () {
valueNotifier.value = 'got changed';
},
child: const Text('Change me'),
), // ElevatedButton
),
]),
);
}
}

一旦分离了文件，就需要导入它们。。。例如，您已经在lib/screens中创建了文件

因此，导入行将是这样的，vs代码/Android Studio可以处理它
import 'package:<app_name>/screens/secondRoute.dart';

对于全局状态管理，你可以有一个从main.dart全局公开的ValueNotifier，你可以简单地通过ValueListenableBuilder来听取它的更改，也可以显示一个非常基本的实现
尽管这不建议用于更大的项目，如果是这样的话，那么你应该使用类似于提供者的东西