2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
고원빈
7c70c14d 1 parent cb2d2f40

[frontend]Navigtaion Bar 구현

Inline Side-by-side
Showing 3 changed files with 169 additions and 116 deletions
...@@ -22,4 +22,8 @@ ...@@ -22,4 +22,8 @@
22 22
23 ### 2021-05-09 23 ### 2021-05-09
24 + Appbar 기능 구현 24 + Appbar 기능 구현
25 -appbar 관련 디자인은 추후 구현 예정
...\ No newline at end of file ...\ No newline at end of file
25 +appbar 관련 디자인은 추후 구현 예정
26 +
27 +### 2021-05-10
28 ++ Appbar 디자인 변경 및 Navgation Bar 구현
29 ++ Setting은 별도의 페이지로 구성
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,6 +5,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ...@@ -5,6 +5,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
5 5
6 class DashBoard extends StatefulWidget { 6 class DashBoard extends StatefulWidget {
7 int pageNumber = 1; 7 int pageNumber = 1;
8 + DashBoard({Key key, this.pageNumber}) : super(key: key);
8 9
9 @override 10 @override
10 _DashBoardState createState() => _DashBoardState(); 11 _DashBoardState createState() => _DashBoardState();
...@@ -16,125 +17,84 @@ class _DashBoardState extends State<DashBoard> { ...@@ -16,125 +17,84 @@ class _DashBoardState extends State<DashBoard> {
16 Widget build(BuildContext context) { 17 Widget build(BuildContext context) {
17 _selectedIndex = widget.pageNumber; 18 _selectedIndex = widget.pageNumber;
18 final Size size = MediaQuery.of(context).size; 19 final Size size = MediaQuery.of(context).size;
20 +
21 + var _tabs = [
22 + ineerInformationpage(context),
23 + mainpage(context),
24 + outerInformationpage(context),
25 + setting(context),
26 + ];
27 +
19 return Scaffold( 28 return Scaffold(
20 backgroundColor: Color(0xffe5f4ff), 29 backgroundColor: Color(0xffe5f4ff),
21 - appBar: PreferredSize( 30 + appBar: AppBar(
22 - preferredSize: Size.fromHeight(65), 31 + iconTheme: IconThemeData(color: Colors.black),
23 - child: Container( 32 + backgroundColor: Colors.white,
24 - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), 33 + title: Text(
25 - color: Colors.white, 34 + 'Medicine Box',
26 - child: AppBar( 35 + style: TextStyle(
27 - backgroundColor: Colors.white, 36 + color: Colors.black,
28 - actions: <Widget>[ 37 + fontSize: 20,
29 - Container( 38 + fontFamily: 'Noto',
30 - width: size.width * 0.25, 39 + fontWeight: FontWeight.bold),
31 - child: FlatButton( 40 + ),
32 - onPressed: () => { 41 + actions: [
33 - _onItemTapped(0), 42 + IconButton(
34 - }, 43 + icon: Icon(
35 - child: Stack( 44 + Icons.settings,
36 - children: <Widget>[ 45 + color: Colors.black,
37 - Container( 46 + ),
38 - margin: EdgeInsets.fromLTRB(0, 4, 0, 0), 47 + onPressed: () {},
39 - padding: EdgeInsets.fromLTRB(5, 0, 5, 5), 48 + )
40 - child: Text( 49 + ],
41 - '임시1', 50 + ),
42 - style: TextStyle( 51 + drawer: Drawer(
43 - color: widget.pageNumber == 0 52 + child: ListView(
44 - ? Color(0xff1674f6) 53 + children: [
45 - : null, 54 + DrawerHeader(
46 - fontSize: 14, 55 + child: Text('Drawer Header'),
47 - fontFamily: 'Noto', 56 + decoration: BoxDecoration(
48 - fontWeight: FontWeight.bold), 57 + color: Colors.blue,
49 - ),
50 - ),
51 - ],
52 - ),
53 - ),
54 - ),
55 - Container(
56 - width: size.width * 0.25,
57 - child: FlatButton(
58 - onPressed: () => {
59 - _onItemTapped(1),
60 - },
61 - child: Stack(
62 - children: <Widget>[
63 - Container(
64 - margin: EdgeInsets.fromLTRB(0, 4, 0, 0),
65 - padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
66 - child: Text(
67 - '임시2',
68 - style: TextStyle(
69 - color: widget.pageNumber == 1
70 - ? Color(0xff1674f6)
71 - : null,
72 - fontSize: 14,
73 - fontFamily: 'Noto',
74 - fontWeight: FontWeight.bold),
75 - ),
76 - ),
77 - ],
78 - ),
79 - ),
80 - ),
81 - Container(
82 - width: size.width * 0.25,
83 - child: FlatButton(
84 - onPressed: () => {
85 - _onItemTapped(2),
86 - },
87 - child: Stack(
88 - children: <Widget>[
89 - Container(
90 - margin: EdgeInsets.fromLTRB(0, 4, 0, 0),
91 - padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
92 - child: Text(
93 - '임시3',
94 - style: TextStyle(
95 - color: widget.pageNumber == 2
96 - ? Color(0xff1674f6)
97 - : null,
98 - fontSize: 14,
99 - fontFamily: 'Noto',
100 - fontWeight: FontWeight.bold),
101 - ),
102 - ),
103 - ],
104 - ),
105 - ),
106 - ),
107 - Container(
108 - width: size.width * 0.25,
109 - child: FlatButton(
110 - onPressed: () => {
111 - _onItemTapped(3),
112 - },
113 - child: Stack(
114 - children: <Widget>[
115 - Column(
116 - mainAxisAlignment: MainAxisAlignment.center,
117 - children: [
118 - Container(
119 - margin: EdgeInsets.fromLTRB(0, 4, 0, 0),
120 - padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
121 - child: Image.asset(
122 - 'images/setting.png',
123 - color: widget.pageNumber == 3
124 - ? Color(0xff1674f6)
125 - : null,
126 - ),
127 - ),
128 - ],
129 - )
130 - ],
131 - ),
132 - ),
133 ), 58 ),
134 - ], 59 + ),
135 - ), 60 + ListTile(
61 + title: Text('Test 1'),
62 + onTap: () {},
63 + ),
64 + ListTile(
65 + title: Text('Test 2'),
66 + onTap: () {},
67 + ),
68 + ListTile(
69 + title: Text('Test 3'),
70 + onTap: () {},
71 + ),
72 + ],
136 ), 73 ),
137 ), 74 ),
75 + body: _tabs[_selectedIndex],
76 + bottomNavigationBar: BottomNavigationBar(
77 + type: BottomNavigationBarType.fixed,
78 + backgroundColor: Colors.grey,
79 + selectedItemColor: Colors.blue,
80 + unselectedItemColor: Colors.white.withOpacity(.60),
81 + selectedFontSize: 14,
82 + unselectedFontSize: 14,
83 + currentIndex: _selectedIndex,
84 + onTap: (int index) => {
85 + setState(() {
86 + _onItemTapped(index);
87 + })
88 + },
89 + items: [
90 + BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Inner'),
91 + BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
92 + BottomNavigationBarItem(
93 + label: 'Outer',
94 + icon: Icon(Icons.favorite),
95 + )
96 + ],
97 + ),
138 ); 98 );
139 } 99 }
140 100
...@@ -144,3 +104,92 @@ class _DashBoardState extends State<DashBoard> { ...@@ -144,3 +104,92 @@ class _DashBoardState extends State<DashBoard> {
144 }); 104 });
145 } 105 }
146 } 106 }
107 +
108 +Widget mainpage(BuildContext context) {
109 + final Size size = MediaQuery.of(context).size;
110 + /*
111 + Main 화면
112 + 약의 정보를 가져와서 출력을 하는 곳
113 + 유저 이메일
114 + 약 이름
115 + 약 제조사
116 + */
117 + return Scaffold(
118 + backgroundColor: Color(0xffe5f4ff),
119 + body: Container(
120 + height: size.height * 0.6,
121 + margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
122 + padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
123 + decoration: BoxDecoration(
124 + border: Border.all(),
125 + borderRadius: BorderRadius.all(
126 + Radius.circular(4.0) // <--- border radius here
127 + ),
128 + ),
129 + child: Column(
130 + crossAxisAlignment: CrossAxisAlignment.center,
131 + children: <Widget>[
132 + Container(
133 + margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
134 + height: size.height * 0.1,
135 + decoration: BoxDecoration(
136 + border: Border.all(),
137 + borderRadius: BorderRadius.all(
138 + Radius.circular(4.0) // <--- border radius here
139 + ),
140 + ),
141 + ),
142 + Container(
143 + margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
144 + height: size.height * 0.1,
145 + decoration: BoxDecoration(
146 + border: Border.all(),
147 + borderRadius: BorderRadius.all(
148 + Radius.circular(4.0) // <--- border radius here
149 + ),
150 + ),
151 + ),
152 + ],
153 + ),
154 + ),
155 + );
156 +}
157 +
158 +Widget ineerInformationpage(BuildContext context) {
159 + /*
160 + 약병 내부 정보 화면
161 + 약병 내부 온도 약병 내부 습도 약병 내부 현황 최근 계폐 시간 을 표시
162 + 맨처음 Inside Information 출력
163 +
164 + 이거 고민이 그냥 저기에 있는 대로 할것인지 아니면 appbar를 저렇게 할 것인지
165 +
166 + 저거는 container을 잘 성정 하고 text를 설정 해야 할 듯
167 +
168 +
169 + */
170 + return Scaffold(
171 + backgroundColor: Colors.white,
172 + );
173 +}
174 +
175 +Widget outerInformationpage(BuildContext context) {
176 + return Scaffold(
177 + backgroundColor: Colors.blue,
178 + );
179 +}
180 +
181 +Widget setting(BuildContext context) {
182 + return Scaffold(
183 + backgroundColor: Colors.green,
184 + );
185 +}
186 +
187 +/*
188 +bottom navbar로 이동
189 +appbar로는 저거 만들어서 사용
190 +설정 smartmedicine box를 app bar 로 구현
191 +이건 우선 작업 후 추후 작업
192 +
193 +
194 +
195 +*/
......
...@@ -173,7 +173,7 @@ class _SignInPageState extends State<SignInPage> { ...@@ -173,7 +173,7 @@ class _SignInPageState extends State<SignInPage> {
173 context, 173 context,
174 MaterialPageRoute( 174 MaterialPageRoute(
175 builder: (BuildContext context) => 175 builder: (BuildContext context) =>
176 - DashBoard(), 176 + DashBoard(pageNumber: 0),
177 )); 177 ));
178 } 178 }
179 } 179 }
......