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

class ShortcutsClone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bottomNavigationBar = CupertinoTabBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.collections),
          title: Text('Archive'),
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.tag),
          title: Text('Gallery'),
        ),
      ],
    );

    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      home: CupertinoTabScaffold(
        tabBar: bottomNavigationBar,
        tabBuilder: (context, i) => CupertinoTabView(
          builder: (context) => CupertinoPageScaffold(
            child: ShortcutsGridView(),
          ),
        ),
      ),
    );
  }
}

class ShortcutsGridView extends StatelessWidget {
  final List<String> _shortcuts = ['One', 'Two', 'Three'];

  @override
  Widget build(BuildContext context) => CustomScrollView(
        slivers: <Widget>[
          CupertinoSliverNavigationBar(
            border: null,
            backgroundColor: CupertinoColors.white,
            leading: Text(
              'Edit',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w400,
                color: CupertinoColors.activeBlue,
              ),
            ),
            trailing: Icon(CupertinoIcons.add),
            largeTitle: Text('Archive'),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: CupertinoTextField(
                    placeholder: 'Search',
                    placeholderStyle: TextStyle(
                        fontWeight: FontWeight.w400,
                        color: CupertinoColors.inactiveGray),
                    cursorColor: CupertinoColors.inactiveGray,
                    prefix: Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Icon(
                        CupertinoIcons.search,
                        color: CupertinoColors.inactiveGray,
                      ),
                    ),
                    decoration: BoxDecoration(
                      color: CupertinoColors.lightBackgroundGray,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                  ),
                ),
              ],
            ),
          ),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 1.5,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) => ShortcutsGridItem(
                name: _shortcuts[index],
              ),
              childCount: _shortcuts.length,
            ),
          )
        ],
      );
}

class ShortcutsGridItem extends StatelessWidget {
  final String name;

  const ShortcutsGridItem({this.name});

  @override
  Widget build(BuildContext context) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(20),
            ),
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              stops: [0.1, 0.3, 0.6, 0.9],
              colors: [
                Colors.pink[400],
                Colors.pink[500],
                Colors.pink[600],
                Colors.pink[700],
              ],
            ),
          ),
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Column(
              children: <Widget>[
                Container(
                  height: 30,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Icon(
                        CupertinoIcons.pen,
                        color: CupertinoColors.white,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          color: CupertinoColors.black.withOpacity(0.2),
                          borderRadius: BorderRadius.circular(20.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(2.0),
                          child: Icon(
                            CupertinoIcons.ellipsis,
                            color: CupertinoColors.white,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                  height: 30,
                  child: Row(
                    children: <Widget>[
                      Text(
                        name,
                        style: TextStyle(
                            color: CupertinoColors.white, fontSize: 24),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      );
}