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 ↗