패키지, 저장소 및 앱 카테고리 검색

flutter_awesome_bottom_sheet 표지
패키지 상세v0.0.2

flutter_awesome_bottom_sheet

빠르고 쉽게 확인 대화 상자로 멋진 바텀 시트를 표시하세요.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
35
좋아요
26
Pub 점수
125

패키지 설치

flutter pub add flutter_awesome_bottom_sheet

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

개발자가 확인 대화 상자로 시각적으로 매력적인 하단 시트를 빠르고 쉽게 표시할 수 있도록 해주는 플러터 패키지입니다. 간단함과 빠른 구현을 위해 설계되었으며 부드러운 애니메이션과 사용자 정의 가능한 레이아웃으로 사용자 인터랙션을 향상시킵니다. 현재 화면에서 벗어나지 않고 사용자 확인 또는 빠른 작업이 필요한 경우에 적합합니다. 이 패키지는 안드로이드, iOS, 웹, macOS, Windows, 리눅스 등 여러 플랫폼을 지원하여 장치 간 일관된 동작을 보장합니다.

사용 사례

  • 사용자 확인 대화상자
  • 빠른 작업 메뉴
  • 폼 제출 프롬프트
  • 모달 피드백 인터페이스
  • 온보딩 단계 표시기

주요 기능

  • 사용하기 쉬운 API
  • 사용자 지정 가능한 애니메이션
  • 크로스 플랫폼 지원
  • 내장 확인 스타일
  • 경량이고 빠름

적합한 대상

  • 빠른 바텀 시트 통합을 원하는 개발자
  • 확인 대화상자를 필요로 하는 프로젝트
  • 모바일 우선 UI 디자인을 채택한 앱
  • 개발 속도를 우선시하는 팀
  • 다중 플랫폼 Flutter 애플리케이션

고려 사항

  • 기본 스타일링을 넘어서는 사용자 정의가 제한적
  • 복잡한 디자인을 위해 추가 스타일링이 필요할 수 있습니다
  • 간단한 확인 흐름에 가장 적합
  • 대량의 데이터 입력 폼에는 적합하지 않음
  • 고급 기능을 위해 외부 종속성에 의존합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Flutter Awesome Bottom Sheet

Features

  • Custom child widgets
  • Adaptive design

Supported platforms

  • Flutter Android
  • Flutter iOS
  • Flutter web
  • Flutter desktop
  • Flutter macOS
  • Flutter linux

Installation

Add flutter_awesome_bottom_sheet: <later-version> to your pubspec.yaml dependencies. And import it:

import 'package:flutter_awesome_bottom_sheet/flutter_awesome_bottom_sheet.dart';
How to Use

How to Use

create object

final AwesomeBottomSheet _awesomeBottomSheet = AwesomeBottomSheet();

Example

Simple Awesome Sheet

 _awesomeBottomSheet.show(
      context: context,
      title: const Text("Lorem Ipsum"),
      description: const Text("Flutter Awesome Bottom sheet content here..."),
      color: CustomSheetColor(
        mainColor: const Color(0xff2979FF),
        accentColor: const Color(0xff0D47A1),
        iconColor: Colors.white,
      ),
      positive: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'CANCEL',
      ),
    );

Add Buttons

 _awesomeBottomSheet.show(
     ...
      positive: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'DELETE',
      ),
      negative: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'CANCEL',
      ),
    );

Add Icons in content and action button


 _awesomeBottomSheet.show(
     ...
      icon: Icons.signal_cellular_connected_no_internet_4_bar,
      positive: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'OPEN SETTING',
        icon: Icons.settings,
      ),
      negative: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'CANCEL',
      ),
    );

Custom color

 _awesomeBottomSheet.show(
      ...
      color: CustomSheetColor(
        mainColor: Colors.white,
        accentColor: const Color(0xff5A67D8),
        iconColor: const Color(0xff5A67D8),
      ),
      ...
    ); 

Screenshot

Simple Action Icon
simple action icon

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.