CupertinoSegmentedControl Widget

Project Preview

  • Interested in seeing the live demo? Click here to explore.
  • Want to view the source code? Visit the project on GitHub.

Code Snippet

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

class CupertinoSegmentedControlWidget extends StatefulWidget {
  const CupertinoSegmentedControlWidget({super.key});

  @override
  State<CupertinoSegmentedControlWidget> createState() =>
      _CupertinoSegmentedControlWidgetState();
}

class _CupertinoSegmentedControlWidgetState
    extends State<CupertinoSegmentedControlWidget> {
  String? _currentText;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("CupertinoSegmentedControl Widget"),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(height: 50),
            CupertinoSegmentedControl(
              selectedColor: Colors.black,
              children: {
                'Flutter': Container(
                  color: _currentText == 'Flutter'
                      ? Colors.orangeAccent[100]
                      : Colors.white,
                  width: double.infinity,
                  padding: const EdgeInsets.all(10.0),
                  child: const Text('Flutter'),
                ),
                'Mapp': Container(
                  color: _currentText == 'Mapp'
                      ? Colors.orangeAccent[100]
                      : Colors.white,
                  width: double.infinity,
                  padding: const EdgeInsets.all(10.0),
                  child: const Text('Learn'),
                ),
                'Course': Container(
                  color: _currentText == 'Course'
                      ? Colors.orangeAccent[100]
                      : Colors.white,
                  width: double.infinity,
                  padding: const EdgeInsets.all(10.0),
                  child: const Text('Smart'),
                ),
              },
              onValueChanged: (String value) {
                setState(() {
                  _currentText = value;
                });
              },
            ),
            const SizedBox(height: 50),
            _currentText != null
                ? Text(
                    _currentText!,
                    style: const TextStyle(fontSize: 50),
                  )
                : Container()
          ],
        ),
      ),
    );
  }
}