搜索插件、代码仓与 APP 分类

flutter_split_view 封面
插件详情v0.1.2

flutter_split_view

基于可用空间自动将屏幕拆分为两个视图的 Flutter 小部件。此功能基于 Navigator 2.0。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
77
喜欢数
30
Pub 分数
150

安装插件

flutter pub add flutter_split_view

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Flutter Split View 是一个响应式布局小部件,可根据可用空间自动将屏幕划分为两个可调整的视图,利用 Navigator 2.0 实现导航和状态管理。它非常适合创建可在各种设备和平台上无缝运行的自适应 UI。该小部件会根据屏幕尺寸和方向动态调整其布局,适用于双面板界面(如主从详情模式)。它支持所有主要的 Flutter 平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。

适合场景

  • 主-明细布局
  • 双面板导航
  • 响应式仪表板设计
  • 跨平台平板电脑用户界面
  • 自适应移动和桌面界面

主要特点

  • 基于屏幕空间的自动布局
  • Navigator 2.0 集成
  • 支持所有 Flutter 平台
  • 动态视图调整大小
  • 内置的响应式行为
  • 易于与现有路线集成

适合对象

  • 开发响应式应用的开发者
  • 针对多个平台的团队
  • 需要分屏功能的应用
  • 专注于自适应布局的UI设计师
  • 使用现代导航模式的项目

使用建议

  • 需要了解 Navigator 2.0
  • 可能需要自定义样式来处理复杂布局
  • 最适合较大的屏幕或平板电脑
  • 对非标准拆分的自定义有限
  • 不适合简单的单视图应用

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

flutter_split_view

A Navigator 2.0 based Flutter widget that automatically splits the screen into two views based on available space.

Demo

Usage
MaterialApp(
    title: 'SplitView Demo',
    home: SplitView.material(
        child: MainPage(),
    ),
);

Cupertino:

CupertinoApp(
    title: 'SplitView Demo',
    home: SplitView.cupertino(
        child: MainPage(),
    ),
);
Navigating
Push
SplitView.of(context).push(SecondPage());

Push with an optional title, which will be used as the back button's title in Cupertino:

SplitView.of(context).push(
    SecondPage(),
    title: 'Second',
);
Pop
SplitView.of(context).pop();

Pop until the n-th page:

SplitView.of(context).popUntil(1);
Set the page displayed in the secondary view
SplitView.of(context).setSecondary(SecondPage());

This will clear the stack and push the new page, making it the second page in the stack.

Get whether the secondary view is visible
SplitView.of(context).isSecondaryVisible;
Example

所属分类

源码仓库

使用此插件的项目

暂无相关数据。