account.dart 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. import 'package:flutter/material.dart';
  2. import 'package:date_format/date_format.dart';
  3. var date = formatDate(DateTime.now(), [HH, ':', nn]);
  4. class AccountPage extends StatefulWidget {
  5. const AccountPage({super.key});
  6. @override
  7. State<AccountPage> createState() => _AccountPageState();
  8. }
  9. class _AccountPageState extends State<AccountPage> {
  10. int _selectedNavbar = 2;
  11. void _changeSelectedNavBar(int index) {
  12. setState(() {
  13. _selectedNavbar = index;
  14. });
  15. }
  16. @override
  17. Widget build(BuildContext context) {
  18. return Scaffold(
  19. appBar: AppBar(
  20. backgroundColor: Colors.white,
  21. automaticallyImplyLeading: false,
  22. elevation: 0,
  23. toolbarHeight: 44,
  24. title: Text(
  25. date,
  26. style: TextStyle(color: Color(0xff303336), fontSize: 15),
  27. ),
  28. actions: [
  29. Icon(
  30. Icons.signal_cellular_alt,
  31. color: Color(0xff303336),
  32. ),
  33. Icon(
  34. Icons.wifi,
  35. color: Color(0xff303336),
  36. ),
  37. RotatedBox(
  38. quarterTurns: -3,
  39. child: Icon(
  40. Icons.battery_std,
  41. color: Color(0xff303336),
  42. ),
  43. )
  44. ],
  45. ),
  46. body: Column(
  47. children: [
  48. Container(
  49. height: 44,
  50. alignment: Alignment.centerLeft,
  51. padding: EdgeInsets.symmetric(horizontal: 10),
  52. child: Text(
  53. 'Account',
  54. style: TextStyle(fontWeight: FontWeight.bold),
  55. ),
  56. ),
  57. Divider(),
  58. Container(
  59. padding: EdgeInsets.all(10),
  60. child: Row(
  61. children: [
  62. CircleAvatar(
  63. backgroundColor: Color(0xff078C84),
  64. child: Text('J'),
  65. ),
  66. Padding(
  67. padding: const EdgeInsets.symmetric(horizontal: 10),
  68. child: Text(
  69. 'James Triyono',
  70. style: TextStyle(fontWeight: FontWeight.bold),
  71. ),
  72. )
  73. ],
  74. ),
  75. ),
  76. Divider(
  77. thickness: 8,
  78. ),
  79. Container(
  80. alignment: Alignment.centerLeft,
  81. padding: EdgeInsets.all(10),
  82. child: Text(
  83. 'Info',
  84. style: TextStyle(fontWeight: FontWeight.bold),
  85. ),
  86. ),
  87. Container(
  88. height: 5,
  89. ),
  90. Container(
  91. padding: EdgeInsets.symmetric(horizontal: 10),
  92. child: Row(
  93. children: [
  94. Text(
  95. 'User ID',
  96. style: TextStyle(color: Color(0xff2D32BF).withOpacity(0.75)),
  97. ),
  98. Spacer(),
  99. Text(
  100. 'jamet',
  101. style: TextStyle(color: Color(0xff292D32)),
  102. )
  103. ],
  104. ),
  105. ),
  106. Container(
  107. height: 8,
  108. ),
  109. Container(
  110. padding: EdgeInsets.symmetric(horizontal: 10),
  111. child: Row(
  112. children: [
  113. Text(
  114. 'Location',
  115. style: TextStyle(color: Color(0xff2D32BF).withOpacity(0.75)),
  116. ),
  117. Spacer(),
  118. Text(
  119. 'Room 331',
  120. style: TextStyle(color: Color(0xff292D32)),
  121. )
  122. ],
  123. ),
  124. ),
  125. Container(
  126. height: 8,
  127. ),
  128. Container(
  129. padding: EdgeInsets.symmetric(horizontal: 10),
  130. child: Row(
  131. children: [
  132. Text(
  133. 'Request Group',
  134. style: TextStyle(color: Color(0xff2D32BF).withOpacity(0.75)),
  135. ),
  136. Spacer(),
  137. Text(
  138. 'All',
  139. style: TextStyle(color: Color(0xff292D32)),
  140. )
  141. ],
  142. ),
  143. ),
  144. Container(
  145. height: 10,
  146. ),
  147. Divider(
  148. thickness: 8,
  149. ),
  150. Container(
  151. alignment: Alignment.centerLeft,
  152. padding: EdgeInsets.all(10),
  153. child: Text(
  154. 'Setting',
  155. style: TextStyle(fontWeight: FontWeight.bold),
  156. ),
  157. ),
  158. Container(
  159. padding: EdgeInsets.symmetric(horizontal: 10),
  160. child: Row(
  161. children: [
  162. Icon(
  163. Icons.language,
  164. color: Color(0xff2D32BF).withOpacity(0.75),
  165. ),
  166. Container(
  167. margin: EdgeInsets.symmetric(horizontal: 5),
  168. child: Text('Language')),
  169. Spacer(),
  170. Text('English'),
  171. Icon(Icons.chevron_right)
  172. ],
  173. ),
  174. ),
  175. Container(
  176. margin: EdgeInsets.all(10),
  177. color: Color(0xff514844).withOpacity(0.5),
  178. height: 1,
  179. width: MediaQuery.of(context).size.width * 0.95,
  180. ),
  181. Container(
  182. padding: EdgeInsets.symmetric(horizontal: 10),
  183. child: Row(
  184. children: [
  185. RotationTransition(
  186. turns: AlwaysStoppedAnimation(135 / 360),
  187. child: Icon(
  188. Icons.vpn_key,
  189. color: Color(0xff2D32BF).withOpacity(0.75),
  190. ),
  191. ),
  192. Container(
  193. margin: EdgeInsets.symmetric(horizontal: 5),
  194. child: Text('Password')),
  195. Spacer(),
  196. Text('Change password'),
  197. Icon(Icons.chevron_right)
  198. ],
  199. ),
  200. ),
  201. Container(
  202. margin: EdgeInsets.all(10),
  203. color: Color(0xff514844).withOpacity(0.5),
  204. height: 1,
  205. width: MediaQuery.of(context).size.width * 0.95,
  206. ),
  207. Container(
  208. padding: EdgeInsets.symmetric(horizontal: 10),
  209. child: Row(
  210. children: [
  211. Icon(
  212. Icons.logout,
  213. color: Color(0xff2D32BF).withOpacity(0.75),
  214. ),
  215. Container(
  216. margin: EdgeInsets.symmetric(horizontal: 5),
  217. child: Text('Logout')),
  218. Spacer(),
  219. Icon(Icons.chevron_right)
  220. ],
  221. ),
  222. ),
  223. Container(
  224. height: 10,
  225. ),
  226. Divider(
  227. thickness: 8,
  228. ),
  229. Spacer(),
  230. BottomNavigationBar(
  231. items: [
  232. BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
  233. BottomNavigationBarItem(
  234. icon: Icon(Icons.history), label: 'History'),
  235. BottomNavigationBarItem(
  236. icon: Icon(Icons.person), label: 'Account')
  237. ],
  238. currentIndex: _selectedNavbar,
  239. onTap: _changeSelectedNavBar,
  240. )
  241. ],
  242. ),
  243. );
  244. }
  245. }