list.dart 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. import 'package:flutter/material.dart';
  2. import 'package:go_router/go_router.dart';
  3. // import 'package:intl/intl.dart';
  4. class ListPage extends StatelessWidget {
  5. const ListPage({Key? key}) : super(key: key);
  6. @override
  7. Widget build(BuildContext context) {
  8. final List<Data> items = [
  9. Data(
  10. type: 'Foods & Drinks',
  11. color: Color(0xffCCA600),
  12. image: 'assets/images/food.png'),
  13. Data(
  14. type: 'Services',
  15. color: Color(0xff90D8F9),
  16. image: 'assets/images/service.png'),
  17. Data(
  18. type: 'Additional',
  19. color: Color(0xffAACEE0),
  20. image: 'assets/images/additional.png'),
  21. Data(
  22. type: 'First Aid',
  23. color: Color(0xffFF1111),
  24. image: 'assets/images/firstaid.png'),
  25. Data(
  26. type: 'Ticket',
  27. color: Color(0xff5ED8F6),
  28. image: 'assets/images/ticket.png'),
  29. Data(
  30. type: 'Vacation',
  31. color: Color(0xffCCA600),
  32. image: 'assets/images/vacation.png'),
  33. Data(
  34. type: 'Transportation',
  35. color: Color(0xff6C8BA5),
  36. image: 'assets/images/transportation.png'),
  37. ];
  38. return Scaffold(
  39. appBar: AppBar(
  40. backgroundColor: Color(0xff078C84),
  41. automaticallyImplyLeading: false,
  42. toolbarHeight: 44,
  43. title: Text(
  44. // date,
  45. '${date.hour}:${date.minute}',
  46. style: TextStyle(color: Colors.white, fontSize: 15),
  47. ),
  48. actions: [
  49. Icon(
  50. Icons.signal_cellular_alt,
  51. color: Colors.white,
  52. ),
  53. Icon(
  54. Icons.wifi,
  55. color: Colors.white,
  56. ),
  57. RotatedBox(
  58. quarterTurns: -3,
  59. child: Icon(
  60. Icons.battery_std,
  61. color: Colors.white,
  62. ),
  63. )
  64. ],
  65. ),
  66. body: Stack(children: [
  67. Container(
  68. decoration: BoxDecoration(color: Color(0xff078C84)),
  69. ),
  70. SingleChildScrollView(
  71. child: Container(
  72. decoration: BoxDecoration(
  73. color: Colors.white,
  74. borderRadius: BorderRadius.only(
  75. topLeft: Radius.circular(16),
  76. topRight: Radius.circular(16)),
  77. border: Border.all(color: Color(0xff078C84))),
  78. child: Column(
  79. children: [
  80. TopMenu(),
  81. Column(
  82. children: List.generate(
  83. items.length,
  84. (i) => SizedBox(
  85. child: ListTile(
  86. leading: gambar(items[i]),
  87. title: Text(items[i].type),
  88. subtitle: Text(
  89. 'Description of ${items[i].type.toLowerCase()}'),
  90. trailing: IconDelete(),
  91. ),
  92. )),
  93. ),
  94. Divider(
  95. thickness: 8,
  96. ),
  97. AvailableMenu(),
  98. Column(
  99. children: List.generate(
  100. items.length,
  101. (i) => SizedBox(
  102. child: ListTile(
  103. leading: gambar(items[i]),
  104. title: Text(items[i].type),
  105. subtitle: Text(
  106. 'Description of ${items[i].type.toLowerCase()}'),
  107. trailing: IconAdd(),
  108. ),
  109. )),
  110. )
  111. ],
  112. ),
  113. ),
  114. ),
  115. ]));
  116. }
  117. Container gambar(Data items) {
  118. return Container(
  119. decoration: BoxDecoration(
  120. border: Border.all(color: items.color),
  121. borderRadius: BorderRadius.all(Radius.circular(20)),
  122. color: items.color.withOpacity(0.4)),
  123. padding: const EdgeInsets.all(5.0),
  124. child: Image.asset(
  125. items.image,
  126. width: 36,
  127. height: 36,
  128. fit: BoxFit.cover,
  129. ),
  130. );
  131. }
  132. }
  133. class Data {
  134. String type;
  135. Color color;
  136. String image;
  137. Data({required this.type, required this.color, required this.image});
  138. }
  139. // DateTime now = DateTime.now();
  140. // String date = DateFormat('kk:mm').format(now);
  141. var date = DateTime.now();
  142. class AvailableMenu extends StatelessWidget {
  143. const AvailableMenu({
  144. Key? key,
  145. }) : super(key: key);
  146. @override
  147. Widget build(BuildContext context) {
  148. return Container(
  149. padding: const EdgeInsets.all(5.0),
  150. child: Row(
  151. children: [
  152. Text(
  153. 'Available Menu',
  154. textAlign: TextAlign.left,
  155. style: TextStyle(
  156. fontWeight: FontWeight.bold, color: Color(0xff292D32)),
  157. ),
  158. ],
  159. ),
  160. );
  161. }
  162. }
  163. class TopMenu extends StatelessWidget {
  164. const TopMenu({
  165. Key? key,
  166. }) : super(key: key);
  167. @override
  168. Widget build(BuildContext context) {
  169. return Container(
  170. padding: const EdgeInsets.all(5.0),
  171. child: Row(
  172. children: [
  173. Text(
  174. 'Top Menu',
  175. textAlign: TextAlign.left,
  176. style: TextStyle(
  177. fontWeight: FontWeight.bold, color: Color(0xff292D32)),
  178. ),
  179. Expanded(
  180. child: Column(
  181. mainAxisAlignment: MainAxisAlignment.center,
  182. children: [
  183. Container(
  184. color: Color(0xff292D32).withOpacity(0.15),
  185. height: 1,
  186. width: 24,
  187. ),
  188. ],
  189. ),
  190. ),
  191. ElevatedButton(
  192. style: ElevatedButton.styleFrom(
  193. backgroundColor: Color(0xff078C84).withOpacity(0.1)),
  194. onPressed: () => context.go('/listblock'),
  195. child: Text(
  196. 'Done',
  197. style: TextStyle(
  198. color: Color(0xff078C84), fontWeight: FontWeight.w300),
  199. ))
  200. ],
  201. ),
  202. );
  203. }
  204. }
  205. class IconAdd extends StatelessWidget {
  206. const IconAdd({
  207. Key? key,
  208. }) : super(key: key);
  209. @override
  210. Widget build(BuildContext context) {
  211. return Icon(
  212. Icons.add_circle,
  213. color: Colors.red,
  214. );
  215. }
  216. }
  217. class IconDelete extends StatelessWidget {
  218. const IconDelete({
  219. Key? key,
  220. }) : super(key: key);
  221. @override
  222. Widget build(BuildContext context) {
  223. return Row(
  224. mainAxisSize: MainAxisSize.min,
  225. children: [
  226. Icon(
  227. Icons.remove_circle,
  228. color: Colors.red,
  229. ),
  230. SizedBox(width: 10),
  231. Icon(Icons.menu),
  232. ],
  233. );
  234. }
  235. }