import 'package:flutter/material.dart';

const Color foregroundColor = Color(0xff00ff00);
const Color backgroundColor = Color(0xff00ffff);
const double elevation = 4.0;
const double scrolledUnderElevation = 6.0;
const Color shadowColor = Color(0xff1212ff);
const ShapeBorder shape = RoundedRectangleBorder(
  borderRadius: BorderRadius.all(Radius.circular(14.0)),
);
const IconThemeData iconTheme = IconThemeData(color: Color(0xffff0000));
const IconThemeData actionsIconTheme = IconThemeData(color: Color(0xff0000ff));
const bool centerTitle = false;
const double titleSpacing = 10.0;
const TextStyle titleTextStyle = TextStyle(
  fontSize: 22.9,
  fontStyle: FontStyle.italic,
  color: Colors.blue,
);

AppBarTheme appBarTheme = const AppBarTheme(
  foregroundColor: foregroundColor,
  backgroundColor: backgroundColor,
  elevation: elevation,
  scrolledUnderElevation: scrolledUnderElevation,
  shadowColor: shadowColor,
  shape: shape,
  iconTheme: iconTheme,
  actionsIconTheme: actionsIconTheme,
  centerTitle: centerTitle,
  titleSpacing: titleSpacing,
  titleTextStyle: titleTextStyle,
);

void main() => runApp(const SliverAppBarExample());

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

  @override
  State<SliverAppBarExample> createState() => _SliverAppBarExampleState();
}

class _SliverAppBarExampleState extends State<SliverAppBarExample> {
  // Parameters
  TextStyle titleTextStyle = const TextStyle(
    color: Colors.deepPurple,
    fontSize: 22,
    fontStyle: FontStyle.italic,
  );
  Widget leading = IconButton(
    icon: const Icon(Icons.menu),
    onPressed: () {},
  );
  PreferredSizeWidget bottomWidget = const TabBar(
    tabs: <Widget>[
      Tab(text: 'Tab 1'),
      Tab(text: 'Tab 2'),
      Tab(text: 'Tab 3'),
    ],
  );

  // Controls
  bool showSliverAppBar = false;
  bool showSliverAppBarMedium = true;
  bool showSliverAppBarLarge = false;
  bool showAll = false;
  bool showLeading = true;
  bool centerTitle = false;
  bool showTitleTextStyle = false;
  bool showTitleSpacing = true;
  bool showAppBarTheme = false;
  bool showBottom = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: showAppBarTheme ? appBarTheme : null,
        useMaterial3: true,
      ),
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              if (showSliverAppBar || showAll)
                SliverAppBar(
                  leading: showLeading ? leading : null,
                  title: const Text('Sliver App Bar'),
                  titleTextStyle: showTitleTextStyle ? titleTextStyle : null,
                  centerTitle: centerTitle,
                  titleSpacing: showTitleSpacing ? null : 0.0,
                  pinned: true,
                  actions: <Widget>[
                    IconButton(
                        icon: const Icon(Icons.favorite), onPressed: () {}),
                    IconButton(
                        icon: const Icon(Icons.favorite), onPressed: () {}),
                  ],
                  bottom: showBottom ? bottomWidget : null,
                ),
              if (showSliverAppBarMedium || showAll)
                SliverAppBar.medium(
                  leading: showLeading ? leading : null,
                  title: const Text('Medium App Bar'),
                  titleTextStyle: showTitleTextStyle ? titleTextStyle : null,
                  centerTitle: centerTitle,
                  titleSpacing: showTitleSpacing ? null : 0.0,
                  actions: <Widget>[
                    IconButton(
                        icon: const Icon(Icons.favorite), onPressed: () {}),
                    IconButton(
                        icon: const Icon(Icons.favorite), onPressed: () {}),
                  ],
                  bottom: showBottom ? bottomWidget : null,
                ),
              if (showSliverAppBarLarge || showAll)
                SliverAppBar.large(
                  leading: showLeading ? leading : null,
                  title: const Text('Large App Bar'),
                  titleTextStyle: showTitleTextStyle ? titleTextStyle : null,
                  centerTitle: centerTitle,
                  titleSpacing: showTitleSpacing ? null : 0.0,
                  actions: <Widget>[
                    IconButton(
                        icon: const Icon(Icons.favorite), onPressed: () {}),
                    IconButton(
                        icon: const Icon(Icons.favorite), onPressed: () {}),
                  ],
                  bottom: showBottom ? bottomWidget : null,
                ),
              const SliverFillRemaining(
                child: Center(
                  child: Text(
                    'Scroll down to collapse the app bar',
                  ),
                ),
              ),
            ],
          ),
          bottomSheet: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Wrap(
                  alignment: WrapAlignment.center,
                  runAlignment: WrapAlignment.center,
                  spacing: 5.0,
                  runSpacing: 5.0,
                  children: <Widget>[
                    FilledButton(
                      onPressed: () {
                        setState(() {
                          showSliverAppBar = true;
                          showSliverAppBarMedium = false;
                          showSliverAppBarLarge = false;
                          showAll = false;
                        });
                      },
                      child: const Text('SliverAppBar'),
                    ),
                    FilledButton(
                      onPressed: () {
                        setState(() {
                          showSliverAppBar = false;
                          showSliverAppBarMedium = true;
                          showSliverAppBarLarge = false;
                          showAll = false;
                        });
                      },
                      child: const Text('SliverAppBar.medium'),
                    ),
                    FilledButton(
                      onPressed: () {
                        setState(() {
                          showSliverAppBar = false;
                          showSliverAppBarMedium = false;
                          showSliverAppBarLarge = true;
                          showAll = false;
                        });
                      },
                      child: const Text('SliverAppBar.large'),
                    ),
                    FilledButton(
                      onPressed: () {
                        setState(() {
                          setState(() {
                            showSliverAppBar = false;
                            showSliverAppBarMedium = false;
                            showSliverAppBarLarge = false;
                            showAll = true;
                          });
                        });
                      },
                      child: const Text('All'),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 10.0,
                ),
                Wrap(
                  alignment: WrapAlignment.center,
                  runAlignment: WrapAlignment.center,
                  spacing: 5.0,
                  runSpacing: 5.0,
                  children: <Widget>[
                    // FilledButton.icon(
                    //   onPressed: () {
                    //     setState(() {
                    //       if (textScaleFactor >= 3.0) {
                    //         textScaleFactor = 1.0;
                    //       } else {
                    //         textScaleFactor += 1.0;
                    //       }
                    //     });
                    //   },
                    //   icon: const Icon(Icons.text_increase_rounded),
                    //   label: Text('TextScale: $textScaleFactor'),
                    // ),
                    FilledButton.icon(
                      onPressed: () {
                        setState(() {
                          showLeading = !showLeading;
                        });
                      },
                      label: const Text('Leading'),
                      icon: Icon(showLeading
                          ? Icons.visibility_off
                          : Icons.visibility),
                    ),
                    FilledButton(
                      onPressed: () {
                        setState(() {
                          centerTitle = !centerTitle;
                        });
                      },
                      child: Text('centerTitle: $centerTitle'),
                    ),
                    FilledButton.icon(
                      onPressed: () {
                        setState(() {
                          showTitleTextStyle = !showTitleTextStyle;
                        });
                      },
                      label: const Text('titleTextStyle'),
                      icon: Icon(showTitleTextStyle
                          ? Icons.visibility_off
                          : Icons.visibility),
                    ),
                    FilledButton.icon(
                      onPressed: () {
                        setState(() {
                          showTitleSpacing = !showTitleSpacing;
                        });
                      },
                      label: const Text('titleSpacing'),
                      icon: Icon(showTitleSpacing
                          ? Icons.visibility_off
                          : Icons.visibility),
                    ),
                    FilledButton.icon(
                      onPressed: () {
                        setState(() {
                          showBottom = !showBottom;
                        });
                      },
                      label: const Text('bottom'),
                      icon: Icon(
                          showBottom ? Icons.visibility_off : Icons.visibility),
                    ),
                    FilledButton.icon(
                      onPressed: () {
                        setState(() {
                          showAppBarTheme = !showAppBarTheme;
                        });
                      },
                      label: const Text('AppBarTheme'),
                      icon: Icon(showAppBarTheme
                          ? Icons.visibility_off
                          : Icons.visibility),
                    ),
                    Builder(builder: (BuildContext context) {
                      return FilledButton(
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute<Widget>(
                              builder: (BuildContext context) =>
                                  const SecondScreen(),
                            ),
                          );
                        },
                        child: const Text('Second Screen'),
                      );
                    }),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar.medium(
            title: Text('Second Screen'),
            centerTitle: false,
          ),
          SliverFillRemaining(
            child: Center(
              child: Text(
                'Scroll down to collapse the app bar',
              ),
            ),
          ),
        ],
      ),
    );
  }
}