telneo_lat/lib/list.dart

import 'package:flutter/material.dart';

class ListPage extends StatelessWidget {
  const ListPage({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,
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              TopMenu(),
              Column(
                children: List.generate(
                    items.length,
                    (i) => SizedBox(
                          child: ListTile(
                            leading: gambar(items[i]),
                            title: Text(items[i].type),
                            subtitle: Text(
                                'Description of ${items[i].type.toLowerCase()}'),
                            trailing: IconDelete(),
                          ),
                        )),
              ),
              Divider(
                thickness: 8,
              ),
              AvailableMenu(),
              Column(
                children: List.generate(
                    items.length,
                    (i) => SizedBox(
                          child: ListTile(
                            leading: gambar(items[i]),
                            title: Text(items[i].type),
                            subtitle: Text(
                                'Description of ${items[i].type.toLowerCase()}'),
                            trailing: IconAdd(),
                          ),
                        )),
              )
            ],
          ),
        ));
  }

  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});
}

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: Container()),
          ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xff078C84).withOpacity(0.1)),
              onPressed: () {
                print('Done');
              },
              child: Text(
                'Done',
                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.do_not_disturb_on,
          color: Colors.red,
        ),
        SizedBox(width: 10),
        Icon(Icons.dehaze),
      ],
    );
  }
}