swagger/lib/listblock.dart

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

class ListBlockPage extends StatelessWidget {
  const ListBlockPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<Data> items = [
      Data(
          type: 'Foods & Drinks',
          color: Color(0xffCCA600),
          image: 'assets/images/food.png'),
      Data(
          type: 'Services',
          color: Color(0xff90D8F9),
          image: 'assets/images/service.png'),
      Data(
          type: 'Additional',
          color: Color(0xffAACEE0),
          image: 'assets/images/additional.png'),
      Data(
          type: 'First Aid',
          color: Color(0xffFF1111),
          image: 'assets/images/firstaid.png'),
      Data(
          type: 'Ticket',
          color: Color(0xff5ED8F6),
          image: 'assets/images/ticket.png'),
      Data(
          type: 'Vacation',
          color: Color(0xffCCA600),
          image: 'assets/images/vacation.png'),
      Data(
          type: 'Transportation',
          color: Color(0xff6C8BA5),
          image: 'assets/images/transportation.png'),
    ];
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xff078C84),
          automaticallyImplyLeading: false,
          toolbarHeight: 44,
          title: Text(
            '${date.hour}:${date.minute}',
            style: TextStyle(color: Colors.white, fontSize: 15),
          ),
          actions: [
            Icon(
              Icons.signal_cellular_alt,
              color: Colors.white,
            ),
            Icon(
              Icons.wifi,
              color: Colors.white,
            ),
            RotatedBox(
              quarterTurns: -3,
              child: Icon(
                Icons.battery_std,
                color: Colors.white,
              ),
            )
          ],
        ),
        body: Stack(children: [
          Container(
            decoration: BoxDecoration(color: Color(0xff078C84)),
          ),
          Container(
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(16),
                    topRight: Radius.circular(16)),
                border: Border.all(color: Color(0xff078C84))),
            child: Column(
              children: [
                TopMenu(),
                GridView.builder(
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4, childAspectRatio: 16 / 9),
                  itemBuilder: (context, index) => Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      gambar(items[index]),
                      Text(items[index].type),
                    ],
                  ),
                  itemCount: items.length,
                ),
                // Divider(
                //   thickness: 8,
                // ),
                AvailableMenu(),
                GridView.builder(
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4, childAspectRatio: 16 / 9),
                  itemBuilder: (context, index) => Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      gambar(items[index]),
                      Text(items[index].type),
                    ],
                  ),
                  itemCount: items.length,
                ),
              ],
            ),
          ),
        ]));
  }

  Container gambar(Data items) {
    return Container(
      decoration: BoxDecoration(
          border: Border.all(color: items.color),
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: items.color.withOpacity(0.4)),
      padding: const EdgeInsets.all(5.0),
      child: Image.asset(
        items.image,
        width: 36,
        height: 36,
        fit: BoxFit.cover,
      ),
    );
  }
}

class Data {
  String type;
  Color color;
  String image;

  Data({required this.type, required this.color, required this.image});
}

var date = DateTime.now();

class AvailableMenu extends StatelessWidget {
  const AvailableMenu({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5.0),
      child: Row(
        children: [
          Text(
            'Available Menu',
            textAlign: TextAlign.left,
            style: TextStyle(
                fontWeight: FontWeight.bold, color: Color(0xff292D32)),
          ),
        ],
      ),
    );
  }
}

class TopMenu extends StatelessWidget {
  const TopMenu({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5.0),
      child: Row(
        children: [
          Text(
            'Top Menu',
            textAlign: TextAlign.left,
            style: TextStyle(
                fontWeight: FontWeight.bold, color: Color(0xff292D32)),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  color: Color(0xff292D32).withOpacity(0.15),
                  height: 1,
                  width: 24,
                ),
              ],
            ),
          ),
          ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xff078C84).withOpacity(0.1)),
              onPressed: () {
                print('Customize');
              },
              child: Text(
                'Customize',
                style: TextStyle(
                    color: Color(0xff078C84), fontWeight: FontWeight.w300),
              ))
        ],
      ),
    );
  }
}

class IconAdd extends StatelessWidget {
  const IconAdd({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Icon(
      Icons.add_circle,
      color: Colors.red,
    );
  }
}

class IconDelete extends StatelessWidget {
  const IconDelete({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(
          Icons.remove_circle,
          color: Colors.red,
        ),
        SizedBox(width: 10),
        Icon(Icons.menu),
      ],
    );
  }
}