cosee/interactive_bottom_sheet

技術主題

# bottom-sheet # dart # flutter # interactive # package # ui-components

使用的依賴

依賴清單 4 項

flutter{"sdk":"flutter"}
flutter_test開發依賴{"sdk":"flutter"}
cosee_lints開發依賴^0.13.0
dart_code_linter開發依賴^4.0.0

原始 README

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

展開 / 收合專案 README

Interactive Bottom Sheet

pub package package publisher style license

A customizable interactive bottom sheet, which lets you interact with the screen behind it.

Preview example

Features

Easy to use
Customizable colors
Customizable DraggableArea
Customizable heights and widths of different parts of the sheet
Possibility to declare snap points

Usage

Depend on it:

dependencies:
  interactive_bottom_sheet: ^1.0.0

Import it:

import 'package:interactive_bottom_sheet/interactive_bottom_sheet.dart';

Example

Scaffold(
  bottomSheet: const InteractiveBottomSheet(
    options: InteractiveBottomSheetOptions(),
    child: Text(
       'Lorem ipsum dolor sit amet.'
    ),
  ),
);

Customization options

Scaffold(
  bottomSheet: const Scaffold(
  bottomSheet: InteractiveBottomSheet(
    options: InteractiveBottomSheetOptions(
      maxSize: 0.75,
      backgroundColor: Colors.green,
      snapList: [0.25, 0.5],
    ),
    draggableAreaOptions: DraggableAreaOptions(
      topBorderRadius: 10,
      height: 75,
      backgroundColor: Colors.grey,
      indicatorColor: Colors.grey,
      indicatorWidth: 50,
      indicatorHeight: 50,
      indicatorRadius: 10,
      ),
    ),
    child: Text('Lorem ipsum dolor sit amet.'),
  ),
);

Top Border Radius

To get rounded Borders at the top of the sheet (usual for iOS) on the top side of the widget, it is necessary to overwrite the bottomSheetTheme.

Theme(
  data: Theme.of(context).copyWith(
    bottomSheetTheme: const BottomSheetThemeData(
      backgroundColor: Colors.transparent
    ),
  ),
  child: const Scaffold(
    bottomSheet: InteractiveBottomSheet(
      child: Text('Lorem ipsum dolor sit amet.'),
    ),
  ),
);

cosee ↗