构建 Flutter App 的最佳实践是什么

Question

我正在使用 Flutter 构建一个应用程序，它由一个 GridView 为 ElevatedButton 的菜单组成。每个按钮提供对特定服务的访问。 该应用始终具有相同的自定义 Scaffold : AppBar, Body, BottomNavBar

应用程序的菜单如下所示：

我想知道我目前起诉构建应用程序的方式是否合适，或者它是否反范式：

1. 概述：

• 有一个带有 extends StatelessWidget 的主类（应用程序），其中初始化了 MaterialApp 小部件和路由。
• 每个服务都有自己的路由，每个服务都有一个特定的 StatelessWidget
• 调用服务时，StatelessWidget 会调用 CustomScaffold StateFulWidget，后者将当前服务/小部件作为参数在内部调用。

2. 代码：

• main.dart

void main() {
  runApp(App());
}
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (context) => Security())
        ],
        child: MaterialApp(
          initialRoute:  '/',
          routes: routes
        )
    );
  }
}

• routes.dart

import 'package:my_app/screens/CustomSplashScreen.dart';
import 'package:my_app/screens/Connexion.dart';
import 'package:my_app/screens/Menu.dart';
import 'package:my_app/screens/Service1.dart';
import 'package:my_app/screens/Service2.dart';
import 'package:my_app/screens/Service3.dart';
import 'package:my_app/screens/Service4.dart';

final Map<String, WidgetBuilder> routes = <String, WidgetBuilder>{
    '/': (context) => CustomSplashScreen(),
    "/Connexion": (BuildContext context) => Connexion(),
    "/Menu": (BuildContext context) => Menu(),
    "/Service1": (BuildContext context) => Service1(),
    "/Service2": (BuildContext context) => Service2(),
    "/Service3": (BuildContext context) => Service3(),
    "/Service4": (BuildContext context) => Service4(),
};

• components/CustomScaffold.dart :

import 'package:flutter/material.dart';

class CustomScaffold extends StatefulWidget {
    Widget currentWidget;

    CustomScaffold({ Key key, this.currentWidget}): super(key: key);

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

class _CustomScaffoldState extends State<CustomScaffold> {

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            drawer: Drawer(
                child: child
            ),
            appBar: AppBar(
                title: Container(
                    child: child
                ),
            ),
            body: widget.currentWidget,
            bottomNavigationBar: Container(
                child: child
            ),
        );
    }
}

• screens/Menu.dart :

import 'package:flutter/material.dart';
import 'package:my_app/components/CustomScaffold.dart';


class Menu extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        int count = 2;
        return CustomScaffold(currentWidget: _buildMenuContainer(context, count));
    }
}

Widget _buildMenuContainer(BuildContext context, int count) => Container(
    child: GridView.count(
        crossAxisCount: count,
        children: [
            _buildMenuButton(
                "Service1", "/Service1","assets/img/Service1.jpg", context),
           _buildMenuButton(
                "Service2", "/Service2", "assets/img/Service2.jpg", context),
           _buildMenuButton(
                 "Service3", "/Service3", "assets/img/Service3.jpg", context),
           _buildMenuButton(
                 "Service4", "/Service4", "assets/img/Service4.jpg", context)
        ],
    ),
)

Widget _buildMenuButton(
    String name, String route, String img, BuildContext context) =>
    Container(
        margin: EdgeInsets.all(5.0),
        child: ElevatedButton(
            onPressed: () {
                Navigator.pushNamed(context, route);
            },
            child: child
        )
    )
);

• screens/Service1.dart

import 'package:my_app/components/CustomScaffold.dart';
import 'package:flutter/material.dart';

class Service1 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return CustomScaffold(_buildInformation(context))
    }
}

Widget _buildService1Container(BuildContext context) => Container(
    child: child
);

这个结构好吗？怎么改进？

感谢您的帮助。