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

패키지 상세v0.0.2

spear_menu

Flutter 화살표 드롭다운 메뉴 플러그인입니다. iOS 및 Android 모두 지원합니다.

30일 다운로드
12
좋아요
38
Pub 점수
40

패키지 설치

flutter pub add spear_menu

패키지 개요

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

Spear Menu는 뾰족한 화살처럼 생긴 애니메이션 효과를 갖춘 세련되고 사용자 정의 가능한 드롭다운 메뉴를 제공하는 플러터 플러그인입니다. iOS 및 안드로이드 모두를 위한 설계로 부드러운 전환과 현대적인 시각적 요소를 통해 사용자 인터랙션을 향상시킵니다. 기존 플러터 앱에 쉽게 통합 가능하며, 개발자가 옵션을 시각적으로 매력적으로 제시할 수 있도록 도와줍니다. `flutter pub add spear_menu`를 통해 최소한의 설정으로 시작할 수 있으며, 반응형 디자인을 지원하고 다양한 UI 요구사항에 맞게 조정할 수 있습니다. 양식, 설정 또는 어떤 인터페이스에서도 우아한 선택 메커니즘을 필요로 하는 경우에 이상적입니다.

사용 사례

  • 모바일 앱에서의 드롭다운 선택
  • 폼 입력 개선
  • 설정 메뉴
  • 사용자 정의 가능한 UI 컴포넌트
  • 상호작용형 탐색 요소

주요 기능

  • 창형 애니메이션 효과
  • 크로스 플랫폼 지원 (iOS 및 안드로이드)
  • Flutter와의 간편한 통합
  • 사용자 정의 가능한 외관
  • 반응형 디자인 호환성

적합한 대상

  • 모바일 앱 개발자
  • UI/UX 디자이너
  • Flutter 초보자
  • 애니메이션 드롭다운을 필요로 하는 앱
  • 현대적인 시각 테마를 가진 프로젝트

고려 사항

  • 모바일 플랫폼에 한정
  • Flutter 레이아웃에 대한 이해가 필요합니다
  • 애니메이션은 저사양 기기에서 성능에 영향을 줄 수 있습니다
  • 웹 또는 데스크톱 지원에 대한 언급 없음
  • 사용자 정의 스타일링에는 추가 코드가 필요합니다

원본 README

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

Flutter Spear Menu

Usage

A spear dropdown menu plugin. The Spear Menu widget is built to be below placed in the button or Icon widget, replacing the FloatingActionButton widget. it's possible to set anywhere in scaffold.

alt text

Example Usage (complete with all params):

You can find the demo at the 'example' folder.

First, you should set the context at somewhere in you code. Like below:

PopupMenu.context = context;
import 'package:flutter/material.dart';
import 'package:popup_menu/popup_menu.dart';
import 'CustomData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Popup Menu Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PopupMenu menu;
  GlobalKey btnKey = GlobalKey();
  List<CustomData> menuList = new List<CustomData>();

  @override
  Widget build(BuildContext context) {
    PopupMenu.context = context;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.topLeft,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              child: MaterialButton(
                height: 10.0,
                key: btnKey,
                onPressed: menuData,
                child: Icon(Icons.menu,),
              ),
            )
          ],
        ),
      ),
    );
  }

  void menuData() {
    if(menuList.isEmpty){
      menuList.clear();
      menuList.add(CustomData('Copy', false));
      menuList.add(CustomData('Power', false));
      menuList.add(CustomData('Setting', true));
      menuList.add(CustomData('PopupMenu', false));
    }

    List<MenuItemProvider> setData = new List<MenuItemProvider>();
    setData.clear();
    for(var io in menuList){
      print("Result : " + io.name);
      setData.add(MenuItem(title: io.name, isActive: io.isShow));
    }

    PopupMenu menu = PopupMenu(
        //backgroundColor: Colors.teal,
        // lineColor: Colors.tealAccent,
        items: setData,

        onClickMenu: onClickMenu,
        stateChanged: stateChanged,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey);
  }

  void onClickMenu(MenuItemProvider item) {
    menuList.map((element) {
      if(item.menuTitle == element.name){
        element.isShow = true;
      }else{
        element.isShow = false;
      }
    }).toList();

    print('Click menu -> ${item.menuTitle}');
  }

  void stateChanged(bool isShow) {
    print('menu is ${isShow ? 'showing' : 'closed'}');
  }

  void onDismiss() {
    print('Menu is dismiss');
  }

}

Issues & Feedback

Please file an issue to send feedback or report a bug. Thank you!

Contributing

Every pull request is welcome.

카테고리

소스 저장소

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

아직 데이터가 없습니다.