Flutter响应式网页设计插件responsive_mpa_web的使用

responsive_mpa_web

Flutter 插件用于具有多页面应用体验的响应式网页应用程序。

使用/示例

如何使用 responsive_mpa_web 包

你应该创建一个 WebPageView 作为 MaterialApp 的第一个屏幕，以定义应用中的菜单栏和页面列表。

首先，你应该创建一个 MaterialApp 小部件。示例如下：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      onGenerateRoute: (settings) {
        if (settings.name == "/home") {
          return PageRouteBuilder(
            settings: settings, // 传递此参数以使 popUntil(), pushNamedAndRemoveUntil() 等方法正常工作
            pageBuilder: (_, __, ___) => const HomePage(),
            transitionsBuilder: (_, a, __, c) => FadeTransition(
              opacity: a,
              child: c,
            ),
          );
        }
        if (settings.name == "/secondpage") {
          return PageRouteBuilder(
            settings: settings, // 传递此参数以使 popUntil(), pushNamedAndRemoveUntil() 等方法正常工作
            pageBuilder: (_, __, ___) => const SecondPage(),
            transitionsBuilder: (_, a, __, c) => FadeTransition(
              opacity: a,
              child: c,
            ),
          );
        }
        if (settings.name == "/thirdpage") {
          return PageRouteBuilder(
            settings: settings, // 传递此参数以使 popUntil(), pushNamedAndRemoveUntil() 等方法正常工作
            pageBuilder: (_, __, ___) => const ThirdPage(),
            transitionsBuilder: (_, a, __, c) => FadeTransition(
              opacity: a,
              child: c,
            ),
          );
        }
        return null;
      },
      onUnknownRoute: (settings) {
        return PageRouteBuilder(
          settings: settings, // 传递此参数以使 popUntil(), pushNamedAndRemoveUntil() 等方法正常工作
          pageBuilder: (_, __, ___) => const UnknownPage(),
          transitionsBuilder: (_, a, __, c) => FadeTransition(
            opacity: a,
            child: c,
          ),
        );
      },
      initialRoute: '/',
      routes: {
        '/': (context) => const HomeScreen(),
        '/secondpage': (context) => const SecondPage(),
        '/thirdpage': (context) => const ThirdPage(),
        '/404': (context) => const UnknownPage(),
      },
    );
  }
}

如何使用 WebPageView 小部件

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return WebPageView(
      listMenuBar: [
        AppBarMenuButton(
          menuText: const Text("Menu 1"),
          pageTitle: "Home Page",
          indexPage: 1,
          onTap: () {
            Navigator.push(
              context,
              FadeInRoute(
                page: const HomePage(),
                routeName: '/home',
              ),
            );
          },
        ),
        AppBarMenuButton(
          menuText: const Text("Menu 2"),
          indexPage: 2,
          pageTitle: "Second Page",
          onTap: () {
            Navigator.push(
              context,
              FadeInRoute(
                page: const SecondPage(),
                routeName: '/secondpage',
              ),
            );
          },
        ),
        AppBarMenuButton(
          menuText: const Text("Menu 3"),
          indexPage: 3,
          pageTitle: "Third Page",
          onTap: () {
            Navigator.push(
              context,
              FadeInRoute(
                page: const ThirdPage(),
                routeName: '/thirdpage',
              ),
            );
          },
        ),
      ],
      listWebPages: const [
        HomePage(),
        SecondPage(),
        ThirdPage(),
      ],
    );
  }
}

WebPageWidget 是创建应用页面的小部件

如何使用 WebPageWidget, AppBarMenu 和 AppDrawer 类

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return WebPageWidget(
      pageTitle: "Home Page",
      index: 1,
      backgroundDecoration: const BoxDecoration(
        color: Colors.blueGrey,
      ),
      appBar: AppBarMenu(
        appBarTitle: const AppBarTitle.text(
          text: Text("Home Page"),
        ),
        onTapToHomePage: () {},
      ),
      bodyOnFullSize: const Center(
        child: Text("Home Page"),
      ),
      bodyOnHalfSize: const Center(
        child: Text("Home Page"),
      ),
      drawer: const AppDrawer(),
    );
  }
}

你也可以使用 WebPageWidget.customScaffold，但你需要使用 HalfSizeScaffoldPage 和 FullSizeScaffoldPage 小部件。

import 'package:flutter/material.dart';
import 'package:responsive_mpa_web/responsive_mpa_web.dart';

class ThirdPage extends StatefulWidget {
  const ThirdPage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<ThirdPage> createState() => _ThirdPageState();
}

class _ThirdPageState extends State<ThirdPage> {
  int currentIndex = 3;
  [@override](/user/override)
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return WebPageWidget.customScaffold(
      pageTitle: "Third Page",
      index: 3,
      backgroundDecoration: const BoxDecoration(
        color: Colors.blueGrey,
      ),
      halfSizeScaffold: HalfSizeScaffoldPage(
        appBar: const AppBarMenu(
          appBarTitle: AppBarTitle.text(
            text: Text("Third Page"),
          ),
        ),
        body: const Center(
          child: Text("Halaman Third"),
        ),
        drawer: const AppDrawer(),
        typeDrawer: TypeDrawer.endDrawer,
      ),
      fullSizeScaffold: const FullSizeScaffoldPage(
        appBar: AppBarMenu(
          appBarTitle: AppBarTitle.text(
            text: Text("Third Page"),
          ),
        ),
        body: Center(
          child: Text("Halaman Third"),
        ),
      ),
    );
  }
}