CupertinoSegmentedControl flutter code example

Example: CupertinoSegmentedControl flutter example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedValue;
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CupertinoSegmentedControl(
                children: {
                  'a': Container(
                    color: _selectedValue == 'a' ? Colors.blue[100] : Colors.white,
                    padding: EdgeInsets.all(8),
                    child: Text('A'),
                  ),
                  'b': Container(
                    color: _selectedValue == 'b' ? Colors.blue[100] : Colors.white,
                    padding: EdgeInsets.all(8),
                    child: Text('B'),
                  ),
                  'c': Container(
                    color: _selectedValue == 'c' ? Colors.blue[100] : Colors.white,
                    padding: EdgeInsets.all(8),
                    child: Text('C'),
                  ),
                  'd': Container(
                    color: _selectedValue == 'd' ? Colors.blue[100] : Colors.white,
                    padding: EdgeInsets.all(8),
                    child: Text('D'),
                  ),
                },
                onValueChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },
              ),
              SizedBox(height: 30),
              _selectedValue != null
                  ? Text(
                      _selectedValue,
                      style: TextStyle(fontSize: 50),
                    )
                  : Container()
            ],
          ),
        ),
      ),
    );
  }
}