flutter

flutterでインディケーターを作成する

2020/04/22

Introduce

flutterでインディケーターを作成して表示させます.
flutterにはStepperというWidgetがありますが,使いにくすぎたのでstep_progress_indicatorというpackageを使います.

step_progress_indicator | Flutter Package
Bar indicator made of a series of selected and unselected steps

Environment

Usage

ソースコードはこちらに置いています. branch名はstepProgressです

https://github.com/monkeydaichan/flutter_samples/tree/stepProgress

Getting Start

Requirement

step_progress_indicatorをpubspec.ymlファイルに追加します.

main.dart

main.dartはscreen.dartを表示させる処理だけです.

screen.dart

コードはこちらです.

解説
MainPageのstepNoの値によって表示させるWidgetを表示させています.
stepNoがない場合はContainer0が表示されます.
次のページを遷移するときに,currentStepにプラス1して,MainPageに渡すことで,表示するコンテナが変わるのを実現しています.

-flutter
-,

Translate »