iOS 13スタイルのSegmentControl

今回の記事ではFlutter のSegmentControl作成するの方法を ステップバイステップで共有します。

今の記事では、CupertinoSlidingSegmentedControlをenum型にしたものを表示しています。

navigationBarから変更した時onValueChangedは、現在のStatefulWidgetの状態をenumの値によって変更するようにします。
まずはSky.midnightをデフォルトの色になるようにします。

Sky _selectedSegment = Sky.midnight; 

enum Sky { midnight, viridian, cerulean }

Map<Sky, Color> skyColors = <Sky, Color>{
  Sky.midnight: const Color(0xff8000ff),
  Sky.viridian: const Color(0xff40826d),
  Sky.cerulean: const Color(0xff007ba7),
};

return CupertinoPageScaffold(
      backgroundColor: skyColors[_selectedSegment],
      navigationBar: CupertinoNavigationBar(
        onValueChanged: (Sky? value) {
            if (value != null) {
              setState(() {
                _selectedSegment = value;
              });
            }
          },
//...
 ),
);

navigationBarのthumbColorやgroupValueは、現在選択されているSegmentControlを表示しています。

navigationBar: CupertinoNavigationBar(
        middle: CupertinoSlidingSegmentedControl<Sky>(
          backgroundColor: CupertinoColors.activeOrange,
          thumbColor: skyColors[_selectedSegment]!,
           groupValue: _selectedSegment,
        ),
      ),

navigationBarで表示したいWidgetリスト

children: const <Sky, Widget>{
            Sky.midnight: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                'Midnight',
                style: TextStyle(color: CupertinoColors.white),
              ),
            ),
            Sky.viridian: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                'Viridian',
                style: TextStyle(color: CupertinoColors.white),
              ),
            ),
            Sky.cerulean: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                'Cerulean',
                style: TextStyle(color: CupertinoColors.white),
              ),
            ),
          },

Segment Controlによって表示したいテスト

Center(
        child: Text(
          'Selected Segment: ${_selectedSegment.name}',
          style: const TextStyle(color: CupertinoColors.white),
        ),
      ),

結果は以下のようになります。

参考記事

https://api.flutter.dev/flutter/cupertino/CupertinoSlidingSegmentedControl-class.html

金曜担当 – Ami