Flutter上下文管理插件flutter_context_dtx的使用

Flutter上下文管理插件flutter_context_dtx的使用

本扩展包提供了对BuildContext实例最常用属性、函数及附加便利方法的便捷访问。基于包build_context。

安装

在你的pubspec.yaml文件中添加依赖：

dependencies:
  flutter_context_dtx:

然后在你想要使用的文件中导入它：

import 'package:flutter_context_dtx/flutter_context_dtx.dart';

使用

以下是一个简单的例子展示如何使用flutter_context_dtx插件：

import 'package:flutter/material.dart';
import "package:flutter_context_dtx/flutter_context_dtx.dart";

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.scaffoldBackgroundColor, // 直接通过context获取背景颜色
      body: Center(
        child: GestureDetector(
          onTap: () => context.pushNamed('/detailsPage'), // 通过context进行页面跳转
          child: Text(
            'Press Me',
            style: context.subtitle1Style, // 直接通过context获取文本样式
          ),
        ),
      ),
    );
  }
}

可用扩展

MediaQuery

MediaQuery相关的属性和方法：

// 注意：这些断点基于Material Design
context.mediaQuery
context.screenSize
context.screenPadding
context.viewPadding
context.viewInsets
context.screenWidth
context.screenHeight
context.statusBarHeight
context.orientation
context.isLandscape
context.isPortrait
context.alwaysUse24HourFormat
context.screenDensity
context.platformBrightness
context.textScaleFactor
context.shortestScreenSide
context.longestScreenSide
context.isSmallPhoneScreen
context.isMediumPhoneScreen
context.isLargePhoneScreen
context.isSmallTabletScreen
context.isLargeTabletScreen
context.isPhoneScreen
context.isTabletScreen
context.isLaptopScreen
context.isDesktopScreen
context.isXSmallScreen
context.isXXSmallScreen
context.isSmallScreen
context.isMediumScreen
context.isLargeScreen
context.isXLargeScreen
context.margin
context.columns
context.widthBody

Navigator

Navigator相关的属性和方法：

context.push()
context.replacement()
context.pushNamed()
context.pushReplacementNamed()
context.popAndPushNamed()
context.pushNamedAndRemoveUntil()
context.ushAndRemoveUntil()
context.replace()
context.replaceRouteBelow()
context.canPop()
context.maybePop()
context.popUntil()
context.pop()
context.removeRoute()
context.removeRouteBelow()
context.finalizeRoute()

Theme

Theme相关的属性和方法：

context.theme
context.textTheme
context.primaryTextTheme
context.bottomAppBarTheme
context.bottomSheetTheme
context.popupMenuTheme
context.buttonBarTheme
context.dividerTheme
context.chipTheme
context.sliderTheme
context.cardTheme
context.tabBarTheme
context.dialogTheme
context.themeBrightness
context.isDarkBrightness
context.isLightBrightness
context.backgroundColor
context.primaryColor
context.canvasColor
context.scaffoldBackgroundColor
context.dividerColor
context.disabledColor
context.appBarTheme
context.tooltipTheme
context.toggleButtonsTheme
context.navigationRailTheme
context.buttonTheme
context.iconTheme
context.listTileTheme
context.headline1TextStyle
context.headline2TextStyle
context.headline3TextStyle
context.headline4TextStyle
context.headline5TextStyle
context.headline6TextStyle
context.subtitle1TextStyle
context.bodyText1TextStyle
context.bodyText2TextStyle
context.captionTextStyle
context.buttonTextStyle
context.subtitle2TextStyle
context.overlineTextStyle
context.headline1PrimaryTextStyle
context.headline2PrimaryTextStyle
context.headline3PrimaryTextStyle
context.headline4PrimaryTextStyle
context.headline5PrimaryTextStyle
context.headline6PrimaryTextStyle
context.subtitle1PrimaryTextStyle
context.bodyText1PrimaryTextStyle
context.bodyText2PrimaryTextStyle
context.captionPrimaryTextStyle
context.buttonPrimaryTextStyle
context.subtitle2PrimaryTextStyle
context.overlinePrimaryTextStyle
context.defaultTextStyle
context.textDirection
context.displayLargeTextStyle
context.displayMediumTextStyle
context.displaySmallTextStyle
context.headlineLargeTextStyle
context.headlineMediumTextStyle
context.headlineSmallTextStyle
context.titleLargeTextStyle
context.titleMediumTextStyle
context.titleSmallTextStyle
context.labelLargeTextStyle
context.labelMediumTextStyle
context.labelSmallTextStyle
context.bodyLargeTextStyle
context.bodyMediumTextStyle
context.bodySmallTextStyle
context.colorScheme
context.colorSchemePrimary
context.colorSchemePrimaryVariant
context.colorSchemeSecondary
context.colorSchemeTertiary
context.colorSchemeSecondaryVariant
context.colorSchemePrimaryContainer
context.colorSchemeSecondaryContainer 
context.colorSchemeTertiaryContainer
context.colorSchemeErrorContainer
context.colorSchemeInversePrimary
context.colorSchemeInverseSurface
context.colorSchemeSurface
context.colorSchemeSurfaceVariant
context.colorSchemeSurfaceTint
context.colorSchemeShadow
context.colorSchemeOutline
context.colorSchemeBackground
context.colorSchemeError
context.colorSchemeOnPrimary
context.colorSchemeOnSecondary
context.colorSchemeOnBackground
context.colorSchemeOnSurface
context.colorSchemeOnError
context.colorSchemeOnPrimaryContainer
context.colorSchemeOnSecondaryContainer
context.colorSchemeOnTertiaryContainer
context.colorSchemeOnErrorContainer
context.colorSchemeOnInverseSurface
context.colorSchemeOnSurfaceVariant
context.colorSchemeBrightness
context.platform
context.isAndroid
context.isIOS
context.isWindows
context.isMacOS
context.isFuchsia
context.isLinux
context.isMobile
context.isWeb
context.isDesktop
context.isMobile
context.isGoogle
context.isApple

Scaffold

scaffold相关的属性和方法：

// 注意：必须在`Scaffold`组件内调用否则可能会出错
context.scaffoldState
context.appBarMaxHeight
context.hasAppBar
context.hasDrawer
context.hasEndDrawer
context.hasFloatingActionButton
context.isDrawerOpen
context.isEndDrawerOpen
context.showSnackBar()
context.removeCurrentSnackBar()
context.hideCurrentSnackBar()
context.openDrawer()
context.openEndDrawer()
context.showBottomSheet()

Form

Form相关的属性和方法：

// 注意：必须在`Scaffold`组件内调用否则可能会出错
context.form.validate()
context.form.reset()
context.form.save()

FocusScope

FocusScope相关的属性和方法：

context.focusScope.hasFocus
context.focusScope.isFirstFocus
context.focusScope.canRequestFocus
context.focusScope.hasPrimaryFocus
context.focusScope.unfocus()
context.focusScope.nextFocus()
context.focusScope.requestFocus()
context.focusScope.previousFocus()
context.focusScope.setFirstFocus()
context.focusScope.consumeKeyboardToken()
context.closeKeyboard()
context.focusTraversalOrder
context.focusTraversalPolicy

Overlay

Overlay相关的属性和方法：

context.overlay
context.addOverlay()

Localizations

Localizations相关的属性和方法：

context.locale
context.countryCode
context.languageCode
context.materialLocalizations
context.widgetsLocalizations

ModalRoute

ModalRoute相关的属性和方法：

context.modalRoute
context.routeSettings
context.args<String>()

Controller

Controller相关的属性和方法：

context.tabController
context.materialInkController
context.primaryScrollController

其他

其他相关的属性和方法：

context.pageStorage
context.scrollBehavior
context.scrollable
context.actions
context.animatedList
context.defaultAssetBundle
context.sliverAnimatedList
context.tickingEnabled

示例代码

下面是一个完整的示例代码，展示了如何使用flutter_context_dtx插件来构建一个简单的Flutter应用。

import 'package:example/pages/focus_scope.dart';
import 'package:example/pages/form.dart';
import 'package:flutter/material.dart';
import 'package:flutter_context_dtx/flutter_context_dtx.dart';

void main() => runApp(const MyApp());

class Routes {
  static const focusScope = '/focusScopePage';
  static const form = '/formPage';
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white24,
        primaryTextTheme: const TextTheme(
          titleLarge: TextStyle(color: Colors.blue),
        ),
      ),
      home: const HomePage(),
      routes: {
        Routes.focusScope: (_) => const FocusScopePage(),
        Routes.form: (_) => const FormPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.scaffoldBackgroundColor,
      appBar: AppBar(),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              ElevatedButton(
                onPressed: () => context.pushNamed(Routes.form),
                child: Text(
                  'Form Example',
                  style: context.headline6TextStyle,
                ),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () => context.pushNamed(Routes.focusScope),
                child: Text(
                  'Focus Scope Example',
                  style: context.headline6TextStyle,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}