list.dart 6.4 KB

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