Skip to content

Latest commit

 

History

History
96 lines (70 loc) · 2.84 KB

README_jp.md

File metadata and controls

96 lines (70 loc) · 2.84 KB

flutter_expandable_fab

pub package

English, 日本語

flutter_expandable_fabは複数のアクションボタンをアニメーションで表示・非表示できるスピードダイアルFABです。
こちらの記事のコードを拡張したものになります。
https://docs.flutter.dev/cookbook/effects/expandable-fab

Fan style & Blur overlay

Vertical style & Color overlay

Horizontal style & Custom buttons

Getting started

import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';

Scaffold(
  floatingActionButtonLocation: ExpandableFab.location,
  floatingActionButton: ExpandableFab(
    children: [
      FloatingActionButton.small(
        child: const Icon(Icons.edit),
        onPressed: () {},
      ),
      FloatingActionButton.small(
        child: const Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
),

Open/Close programmatically

final _key = GlobalKey<ExpandableFabState>();

Scaffold(
  floatingActionButtonLocation: ExpandableFab.location,
  floatingActionButton: ExpandableFab(
    key: _key,
    children: [
      FloatingActionButton.small(
        child: const Icon(Icons.edit),
        onPressed: () {
          final state = _key.currentState;
          if (state != null) {
            debugPrint('isOpen:${state.isOpen}');
            state.toggle();
          }
        },
      ),
    ],
  ),
),

Properties

Property Description Default
distance 子アイテムとの距離 100
duration アニメーション時間 250ms
fanAngle 扇タイプでの角度 90
initialOpen 初期表示時に開く false
type このウィジェットの動作タイプ fan
closeButtonStyle 閉じるボタンのスタイル
child 子ウィジェット
childrenOffset 子アイテムの位置調整
children 子アイテム
foregroundColor 子ウィジェットのフォアグラウンドカラー
backgroundColor ボタンの背景色
onOpen メニューオープンイベントハンドラ
onClose メニュークローズイベントハンドラ
overlayStyle オーバーレイのスタイル、nullで非表示