cupertino_segmented_control_demo.dart

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

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

import '../../gallery/demo.dart';

const Color _kKeyUmbraOpacity = Color(0x33000000); // alpha = 0.2
const Color _kKeyPenumbraOpacity = Color(0x24000000); // alpha = 0.14
const Color _kAmbientShadowOpacity = Color(0x1F000000); // alpha = 0.12

class CupertinoSegmentedControlDemo extends StatefulWidget {
  static const String routeName = 'cupertino/segmented_control';

  @override
  _CupertinoSegmentedControlDemoState createState() => _CupertinoSegmentedControlDemoState();
}

class _CupertinoSegmentedControlDemoState extends State<CupertinoSegmentedControlDemo> {
  final Map<int, Widget> children = const <int, Widget>{
    0: Text('Midnight'),
    1: Text('Viridian'),
    2: Text('Cerulean'),
  };

  final Map<int, Widget> icons = const <int, Widget>{
    0: Center(
      child: FlutterLogo(
        colors: Colors.indigo,
        size: 200.0,
      ),
    ),
    1: Center(
      child: FlutterLogo(
        colors: Colors.teal,
        size: 200.0,
      ),
    ),
    2: Center(
      child: FlutterLogo(
        colors: Colors.cyan,
        size: 200.0,
      ),
    ),
  };

  int sharedValue = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: const Text('Segmented Control'),
        // We're specifying a back label here because the previous page is a
        // Material page. CupertinoPageRoutes could auto-populate these back
        // labels.
        previousPageTitle: 'Cupertino',
        trailing: CupertinoDemoDocumentationButton(CupertinoSegmentedControlDemo.routeName),
      ),
      child: DefaultTextStyle(
        style: CupertinoTheme.of(context).textTheme.textStyle,
        child: SafeArea(
          child: Column(
            children: <Widget>[
              const Padding(
                padding: EdgeInsets.all(16.0),
              ),
              SizedBox(
                width: 500.0,
                child: CupertinoSegmentedControl<int>(
                  children: children,
                  onValueChanged: (int newValue) {
                    setState(() {
                      sharedValue = newValue;
                    });
                  },
                  groupValue: sharedValue,
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 32.0,
                    horizontal: 16.0,
                  ),
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                      vertical: 64.0,
                      horizontal: 16.0,
                    ),
                    decoration: BoxDecoration(
                      color: CupertinoTheme.of(context).scaffoldBackgroundColor,
                      borderRadius: BorderRadius.circular(3.0),
                      boxShadow: const <BoxShadow>[
                        BoxShadow(
                          offset: Offset(0.0, 3.0),
                          blurRadius: 5.0,
                          spreadRadius: -1.0,
                          color: _kKeyUmbraOpacity,
                        ),
                        BoxShadow(
                          offset: Offset(0.0, 6.0),
                          blurRadius: 10.0,
                          spreadRadius: 0.0,
                          color: _kKeyPenumbraOpacity,
                        ),
                        BoxShadow(
                          offset: Offset(0.0, 1.0),
                          blurRadius: 18.0,
                          spreadRadius: 0.0,
                          color: _kAmbientShadowOpacity,
                        ),
                      ],
                    ),
                    child: icons[sharedValue],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}