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

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

Contextions 是一个用于 Flutter 的包，它通过扩展 BuildContext 的方法来简化导航、主题访问、媒体查询等功能。这使得 Flutter 应用的开发更加方便和简洁。

特性

导航

通过 contextions 可以轻松地进行页面跳转并管理导航栈：

// 跳转到新页面
context.to(YourPage());

// 替换当前页面
context.navigateAndReplace(YourPage());

// 返回上一页
context.pop();

主题和媒体查询

可以直接从 BuildContext 访问主题数据和媒体查询属性：

// 获取主题数据
ThemeData theme = context.theme;

// 获取文本样式
TextTheme textTheme = context.textTheme;

// 获取屏幕尺寸
Size screenSize = context.screenSize;

// 获取屏幕高度
double screenHeight = context.screenHeight;

// 获取屏幕宽度
double screenWidth = context.screenWidth;

Snackbar

可以使用一行代码展示 Snackbar 消息：

context.showSnackbar('Message');

对话框

可以展示带有自定义内容和操作的对话框：

context.showDialogX(
  AlertDialog(
    title: Text('Dialog Title'),
    content: Text('Dialog Content'),
    actions: [
      TextButton(
        onPressed: () => context.pop(),
        child: Text('OK'),
      ),
    ],
  ),
);

抽屉菜单

可以打开和关闭抽屉菜单：

context.openDrawer();
context.closeDrawer();

模态底部菜单

可以展示模态底部菜单：

context.showModalBottomSheetX(
  Container(
    child: Text('Bottom Sheet Content'),
  ),
);

自定义底部菜单

可以展示可自定义内容的底部菜单：

context.showBottomSheetX(
  builder: (BuildContext context) => Container(
    child: Text('Custom Bottom Sheet Content'),
  ),
);

搜索界面

可以展示搜索界面：

context.showSearchX(
  delegate: CustomSearchDelegate(),
);

带有自定义内容和操作的对话框

可以展示带有自定义内容和操作的对话框：

context.showDialogXY(
  title: 'Custom Dialog Title',
  content: 'Custom Dialog Content',
  actions: [
    TextButton(
      onPressed: () => context.pop(),
      child: Text('OK'),
    ),
  ],
);

键盘可见性

可以检查键盘是否可见：

bool isKeyboardVisible = context.isKeyboardVisible;

屏幕方向

可以检查屏幕是否处于横屏或竖屏模式：

bool isLandscape = context.isLandscape;
bool isPortrait = context.isPortrait;

示例

以下是一个基本示例，展示了如何使用 contextions：

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

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Context Extensions Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示 Snackbar 消息
            context.showSnackbar('Hello from Context Extensions!');
          },
          child: Text('Show Snackbar'),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyWidget(),
  ));
}

完整示例

下面是一个更完整的示例，展示了如何使用 contextions 进行页面跳转和显示 Snackbar：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Material App',
      home: Home(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Material App Bar'),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: () {
                // 跳转到第二个屏幕
                context.to(const ScreenTwo());
              },
              child: const Text('Go to Screen Two'),
            ),
            const SizedBox(
              height: 20,
            ),
            TextButton(
              onPressed: () {
                // 显示 Snackbar 消息
                context.showSnackbar('Hello World');
              },
              child: const Text('Show Snackbar'),
            ),
            const SizedBox(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Material App Bar'),
      ),
      body: Center(
        child: Column(
          children: [
            const Text('Hello World'),
            const SizedBox(
              height: 20,
            ),
            TextButton(
              onPressed: () {
                // 返回上一页
                Navigator.pop(context);
              },
              child: const Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}