import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

enum Options {
  first,
  second,
  third,
}

List<Widget> children = [
  const Text('First'),
  const Text('Second'),
  const Text('Third'),
];

List<ButtonSegment<Options>> segments = [
  ButtonSegment(
    value: Options.first,
    label: children[0],
  ),
  ButtonSegment(
    value: Options.second,
    label: children[1],
  ),
  ButtonSegment(
    value: Options.third,
    label: children[2],
  ),
];

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 500,
      height: 500,
      child: Column(
        children: [
          LayoutBuilder(
            builder: (context, constraints) {
              return Column(
                children: [
                  const Text('Toggle Button'),
                  const SizedBox(height: 10),
                  const Text('Default (no flex)'),
                  ToggleButtons(
                    direction: Axis.horizontal,
                    onPressed: (int index) => print(index),
                    isSelected: const [true, false, false],
                    children: children,
                  ),
                  const SizedBox(height: 50),
                  const Text('Preferred (flex mimmicked)'),
                  Container(
                    decoration: const BoxDecoration(
                      color: Colors.blueAccent,
                    ),
                    child: ToggleButtons(
                      direction: Axis.horizontal,
                      onPressed: (int index) => print(index),
                      isSelected: const [true, false, false],
                      constraints: BoxConstraints.expand(
                        width: (constraints.maxWidth / children.length) -
                            (children.length + 1),
                        height: 50,
                      ),
                      children: children,
                    ),
                  ),
                ],
              );
            },
          ),
          const SizedBox(height: 50),
          const Text('Segmented Button'),
          const SizedBox(height: 10),
          LayoutBuilder(
            builder: (context, constraints) {
              return Column(
                children: [
                  const Text('Default (no flex)'),
                  SegmentedButton<Options>(
                    showSelectedIcon: false,
                    selected: const <Options>{Options.first},
                    onSelectionChanged: (Set<Options> newSelection) =>
                        print(newSelection),
                    segments: segments,
                  ),
                  const SizedBox(height: 50),
                  const Text('Preferred (flex not achievable)'),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: SegmentedButton<Options>(
                      showSelectedIcon: false,
                      selected: const <Options>{Options.first},
                      onSelectionChanged: (Set<Options> newSelection) =>
                          print(newSelection),
                      segments: segments,
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }
}