todos-contra-el-fuego-mobile/lib/widgets/app_intro_page.dart

// Copyright 2015 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/material.dart';
import '../utils/widget_utils.dart';

class AppIntroItem {
  AppIntroItem({required this.icon, required this.title, this.subTitle = ''});

  final IconData icon;
  final String title;
  final String subTitle;
}

typedef OnIntroFinish = void Function(BuildContext context);
typedef ListItems = List<AppIntroItem> Function(BuildContext context);

abstract class AppIntroPage extends StatelessWidget {
  const AppIntroPage(
      {Key? key, required this.items, required this.onIntroFinish})
      : super(key: key);

  static const String routeName = '/appintro';
  final ListItems items;
  final OnIntroFinish onIntroFinish;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: items(context).length,
        child: _AppIntroPageSelector(items: items, onFinish: onIntroFinish),
      ),
    );
  }
}

class _AppIntroPageSelector extends StatelessWidget {
  const _AppIntroPageSelector({required this.items, required this.onFinish});

  final ListItems items;
  final OnIntroFinish onFinish;

  void _handleArrowButtonPress(BuildContext context, int delta) {
    final TabController controller = DefaultTabController.of(context)!;
    if (!controller.indexIsChanging)
      controller.animateTo(
          (controller.index + delta).clamp(0, items(context).length - 1));
  }

  @override
  Widget build(BuildContext context) {
    final TabController controller = DefaultTabController.of(context)!;

    final ThemeData theme = Theme.of(context);
    final Color color = theme.colorScheme.secondary;
    final TextStyle titleStyle =
        (theme.textTheme.headlineSmall ?? const TextStyle())
            .copyWith(color: color);
    final TextStyle subTitleStyle =
        theme.textTheme.titleMedium ?? const TextStyle();

    return SafeArea(
      bottom: false,
      child: Column(
        children: <Widget>[
          Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
            IconButton(
                onPressed: () {
                  onFinish(context);
                },
                icon:
                    const Icon(Icons.close, size: 30.0, color: Colors.black38)),
          ]),
          Expanded(child: OrientationBuilder(
              builder: (BuildContext context, Orientation orientation) {
            return IconTheme(
              data: IconThemeData(
                size: orientation == Orientation.portrait ? 200.0 : 100.0,
                color: color,
              ),
              child: TabBarView(
                  children: items(context).map((AppIntroItem item) {
                return Container(
                  padding: const EdgeInsets.all(12.0),
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Icon(
                          item.icon,
                          semanticLabel: item.title,
                        ),
                        Padding(
                            padding:
                                const EdgeInsets.only(left: 16.0, right: 16.0),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  item.title,
                                  style: titleStyle,
                                  textAlign: TextAlign.center,
                                ),
                                const SizedBox(height: 20.0),
                                Text(
                                  item.subTitle,
                                  style: subTitleStyle,
                                  textAlign: TextAlign.center,
                                )
                              ],
                            )),
                      ],
                    ),
                  ),
                );
              }).toList()),
            );
          })),
          Container(
              margin: const EdgeInsets.only(top: 16.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: compactWidgets(<Widget?>[
                    IconButton(
                        icon: const Icon(Icons.chevron_left),
                        color: color,
                        onPressed: () {
                          _handleArrowButtonPress(context, -1);
                        },
                        tooltip: 'Page back'),
                    TabPageSelector(controller: controller),
                    IconButton(
                        icon: const Icon(Icons.chevron_right),
                        color: color,
                        onPressed: () {
                          _handleArrowButtonPress(context, 1);
                          if (!controller.indexIsChanging &&
                              controller.index == items(context).length - 1) {
                            onFinish(context);
                          }
                        },
                        tooltip: 'Page forward'),
                  ]))),
        ],
      ),
    );
  }
}