搜尋套件、儲存庫與 APP 分類

GitHub 儲存庫caseyryan/flutter_cupertino_bottom_sheet

flutter_cupernino_bottom_sheet

一個模擬全螢幕Cupertino風格底部彈出式面板的套件

flutter_cupernino_bottom_sheet 專案封面
星標
10
分支
3
最近推送(UTC)
2024年10月14日
專案狀態
未封存

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

A package that mimics a Cupertino bottom sheet like this VERY EASILY

pub.devstyle: effective dart Awesome Flutter

Apr-20-2023 11-43-53

Unlike existing packages that can mimic the same behavior flutter_cupertino_bottom_sheet does not require a scaffold for this purpose and can be used from any place and any time. You don't have to use any special code except for wrapping your MaterialApp with CupertinoBottomSheetRepaintBoundary() at the beginning. And that's it. That simple. You don't even need a specific context for it to work

How it works.

It's very simple. Internally it uses a repaint boundary to create a screenshot of the whole screen and make a RawImage out of it. So it doesn't matter if the previous route maintains its state or not. It doesn't really need to know anything about the previous route as it uses a screenshot instead of a widget snapshot

Getting started

import the package where you initialize your app

import 'package:flutter_cupertino_bottom_sheet/flutter_cupertino_bottom_sheet.dart';

And then wrap your MaterialApp or whatever type you use with CupertinoBottomSheetRepaintBoundary

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

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

  @override
  Widget build(BuildContext context) {
    return CupertinoBottomSheetRepaintBoundary(
      child: MaterialApp(
        ...
      ),
    );
  }
}

This will provide a necessary RenderRepaintBoundary for the library to work.

Then you can use a Navigator to push this route like this:

Navigator.of(context).push(
    CupertinoBottomSheetRoute(
        args: const CupertinoBottomSheetRouteArgs(
            swipeSettings: SwipeSettings(
            canCloseBySwipe: true,
            ),
        ),
        builder: (context) {
            return const TestPage();
        },
    ),
);
Want less code? No problem.

Pass a cupertinoBottomSheetNavigatorKey to your App initialization

@override
Widget build(BuildContext context) {
  return CupertinoBottomSheetRepaintBoundary(
    child: MaterialApp(
      navigatorKey: cupertinoBottomSheetNavigatorKey,
      ...
    ),
  );
}

And then call openCupertinoBottomSheet() from any place, regardless of context

openCupertinoBottomSheet(builder: (c) {
    return const TestPage();
    args: CupertinoBottomSheetRouteArgs(
      appBar: CupertinoBottomSheetAppBar.withCloseButton(
        title: 'Cupertino Actionsheet',
        buttonText: 'Done',
        headerStyle: Theme.of(context).textTheme.bodyMedium,
        onClosePressed: Navigator.of(context).pop,
      ),
    ),
});
Konstantin Serov GitHub avatar
GitHub 作者

Konstantin Serov ↗

Senior Flutter / Dart developer passionate for cool complex modern UI designs. 8+ years of commercial work on Flutter and 9+ years of other technologies

Serov KonstantinNovosibirsk官方網站 ↗
語言DartC++CMakeRubyHTMLCSwiftKotlinObjective-C

使用的依賴

依賴清單 4 項

如何選擇適合專案的儲存庫?

先依使用情境篩選,再比較專案活躍情況,最後到原始儲存庫確認使用要求。

  1. 透過儲存庫名稱、作者或描述搜尋,再依技術分類縮小範圍。
  2. 綜合星標、分支與最近推送比較專案;星標反映社群關注,不保證品質。
  3. 使用前在 GitHub 確認 README、授權條款與 Issues。

來源與維護

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗