listblock.dart 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. import 'package:flutter/material.dart';
  2. class ListBlockPage extends StatelessWidget {
  3. const ListBlockPage({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. RotatedBox(
  55. quarterTurns: -3,
  56. child: Icon(
  57. Icons.battery_std,
  58. color: Colors.white,
  59. ),
  60. )
  61. ],
  62. ),
  63. body: Stack(children: [
  64. Container(
  65. decoration: BoxDecoration(color: Color(0xff078C84)),
  66. ),
  67. SingleChildScrollView(
  68. child: Container(
  69. decoration: BoxDecoration(
  70. color: Colors.white,
  71. borderRadius: BorderRadius.only(
  72. topLeft: Radius.circular(16),
  73. topRight: Radius.circular(16)),
  74. border: Border.all(color: Color(0xff078C84))),
  75. child: Column(
  76. children: [
  77. TopMenu(),
  78. Column(
  79. children: List.generate(
  80. items.length,
  81. (i) => SizedBox(
  82. child: ListTile(
  83. leading: gambar(items[i]),
  84. title: Text(items[i].type),
  85. ),
  86. )),
  87. ),
  88. Divider(
  89. thickness: 8,
  90. ),
  91. AvailableMenu(),
  92. Column(
  93. children: List.generate(
  94. items.length,
  95. (i) => SizedBox(
  96. child: ListTile(
  97. leading: gambar(items[i]),
  98. title: Text(items[i].type),
  99. ),
  100. )),
  101. )
  102. ],
  103. ),
  104. ),
  105. ),
  106. ]));
  107. }
  108. Container gambar(Data items) {
  109. return Container(
  110. decoration: BoxDecoration(
  111. border: Border.all(color: items.color),
  112. borderRadius: BorderRadius.all(Radius.circular(20)),
  113. color: items.color.withOpacity(0.4)),
  114. padding: const EdgeInsets.all(5.0),
  115. child: Image.asset(
  116. items.image,
  117. width: 36,
  118. height: 36,
  119. fit: BoxFit.cover,
  120. ),
  121. );
  122. }
  123. }
  124. class Data {
  125. String type;
  126. Color color;
  127. String image;
  128. Data({required this.type, required this.color, required this.image});
  129. }
  130. var date = DateTime.now();
  131. class AvailableMenu extends StatelessWidget {
  132. const AvailableMenu({
  133. Key? key,
  134. }) : super(key: key);
  135. @override
  136. Widget build(BuildContext context) {
  137. return Container(
  138. padding: const EdgeInsets.all(5.0),
  139. child: Row(
  140. children: [
  141. Text(
  142. 'Available Menu',
  143. textAlign: TextAlign.left,
  144. style: TextStyle(
  145. fontWeight: FontWeight.bold, color: Color(0xff292D32)),
  146. ),
  147. ],
  148. ),
  149. );
  150. }
  151. }
  152. class TopMenu extends StatelessWidget {
  153. const TopMenu({
  154. Key? key,
  155. }) : super(key: key);
  156. @override
  157. Widget build(BuildContext context) {
  158. return Container(
  159. padding: const EdgeInsets.all(5.0),
  160. child: Row(
  161. children: [
  162. Text(
  163. 'Top Menu',
  164. textAlign: TextAlign.left,
  165. style: TextStyle(
  166. fontWeight: FontWeight.bold, color: Color(0xff292D32)),
  167. ),
  168. Expanded(child: Container()),
  169. ElevatedButton(
  170. style: ElevatedButton.styleFrom(
  171. backgroundColor: Color(0xff078C84).withOpacity(0.1)),
  172. onPressed: () {
  173. print('Done');
  174. },
  175. child: Text(
  176. 'Done',
  177. style: TextStyle(
  178. color: Color(0xff078C84), fontWeight: FontWeight.w300),
  179. ))
  180. ],
  181. ),
  182. );
  183. }
  184. }
  185. class IconAdd extends StatelessWidget {
  186. const IconAdd({
  187. Key? key,
  188. }) : super(key: key);
  189. @override
  190. Widget build(BuildContext context) {
  191. return Icon(
  192. Icons.add_circle,
  193. color: Colors.red,
  194. );
  195. }
  196. }
  197. class IconDelete extends StatelessWidget {
  198. const IconDelete({
  199. Key? key,
  200. }) : super(key: key);
  201. @override
  202. Widget build(BuildContext context) {
  203. return Row(
  204. mainAxisSize: MainAxisSize.min,
  205. children: [
  206. Icon(
  207. Icons.remove_circle,
  208. color: Colors.red,
  209. ),
  210. SizedBox(width: 10),
  211. Icon(Icons.menu),
  212. ],
  213. );
  214. }
  215. }