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 147 additions and 94 deletions
......@@ -23,3 +23,7 @@
### 2021-05-09
+ Appbar 기능 구현
appbar 관련 디자인은 추후 구현 예정
### 2021-05-10
+ Appbar 디자인 변경 및 Navgation Bar 구현
+ Setting은 별도의 페이지로 구성
\ No newline at end of file
......
......@@ -5,6 +5,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
class DashBoard extends StatefulWidget {
int pageNumber = 1;
DashBoard({Key key, this.pageNumber}) : super(key: key);
@override
_DashBoardState createState() => _DashBoardState();
......@@ -16,131 +17,179 @@ class _DashBoardState extends State<DashBoard> {
Widget build(BuildContext context) {
_selectedIndex = widget.pageNumber;
final Size size = MediaQuery.of(context).size;
var _tabs = [
ineerInformationpage(context),
mainpage(context),
outerInformationpage(context),
setting(context),
];
return Scaffold(
backgroundColor: Color(0xffe5f4ff),
appBar: PreferredSize(
preferredSize: Size.fromHeight(65),
child: Container(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
color: Colors.white,
child: AppBar(
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
actions: <Widget>[
Container(
width: size.width * 0.25,
child: FlatButton(
onPressed: () => {
_onItemTapped(0),
},
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 4, 0, 0),
padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
child: Text(
'임시1',
title: Text(
'Medicine Box',
style: TextStyle(
color: widget.pageNumber == 0
? Color(0xff1674f6)
: null,
fontSize: 14,
color: Colors.black,
fontSize: 20,
fontFamily: 'Noto',
fontWeight: FontWeight.bold),
),
actions: [
IconButton(
icon: Icon(
Icons.settings,
color: Colors.black,
),
onPressed: () {},
)
],
),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
Container(
width: size.width * 0.25,
child: FlatButton(
onPressed: () => {
_onItemTapped(1),
},
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 4, 0, 0),
padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
child: Text(
'임시2',
style: TextStyle(
color: widget.pageNumber == 1
? Color(0xff1674f6)
: null,
fontSize: 14,
fontFamily: 'Noto',
fontWeight: FontWeight.bold),
ListTile(
title: Text('Test 1'),
onTap: () {},
),
ListTile(
title: Text('Test 2'),
onTap: () {},
),
],
ListTile(
title: Text('Test 3'),
onTap: () {},
),
],
),
),
Container(
width: size.width * 0.25,
child: FlatButton(
onPressed: () => {
_onItemTapped(2),
body: _tabs[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.white.withOpacity(.60),
selectedFontSize: 14,
unselectedFontSize: 14,
currentIndex: _selectedIndex,
onTap: (int index) => {
setState(() {
_onItemTapped(index);
})
},
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 4, 0, 0),
padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
child: Text(
'임시3',
style: TextStyle(
color: widget.pageNumber == 2
? Color(0xff1674f6)
: null,
fontSize: 14,
fontFamily: 'Noto',
fontWeight: FontWeight.bold),
),
),
items: [
BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Inner'),
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
label: 'Outer',
icon: Icon(Icons.favorite),
)
],
),
);
}
void _onItemTapped(int index) {
setState(() {
widget.pageNumber = index;
});
}
}
Widget mainpage(BuildContext context) {
final Size size = MediaQuery.of(context).size;
/*
Main 화면
약의 정보를 가져와서 출력을 하는 곳
유저 이메일
약 이름
약 제조사
*/
return Scaffold(
backgroundColor: Color(0xffe5f4ff),
body: Container(
height: size.height * 0.6,
margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.all(
Radius.circular(4.0) // <--- border radius here
),
),
Container(
width: size.width * 0.25,
child: FlatButton(
onPressed: () => {
_onItemTapped(3),
},
child: Stack(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.fromLTRB(0, 4, 0, 0),
padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
child: Image.asset(
'images/setting.png',
color: widget.pageNumber == 3
? Color(0xff1674f6)
: null,
margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
height: size.height * 0.1,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.all(
Radius.circular(4.0) // <--- border radius here
),
),
],
)
],
),
Container(
margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
height: size.height * 0.1,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.all(
Radius.circular(4.0) // <--- border radius here
),
),
],
),
],
),
),
);
}
}
void _onItemTapped(int index) {
setState(() {
widget.pageNumber = index;
});
}
Widget ineerInformationpage(BuildContext context) {
/*
약병 내부 정보 화면
약병 내부 온도 약병 내부 습도 약병 내부 현황 최근 계폐 시간 을 표시
맨처음 Inside Information 출력
이거 고민이 그냥 저기에 있는 대로 할것인지 아니면 appbar를 저렇게 할 것인지
저거는 container을 잘 성정 하고 text를 설정 해야 할 듯
*/
return Scaffold(
backgroundColor: Colors.white,
);
}
Widget outerInformationpage(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
);
}
Widget setting(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
);
}
/*
bottom navbar로 이동
appbar로는 저거 만들어서 사용
설정 smartmedicine box를 app bar 로 구현
이건 우선 작업 후 추후 작업
*/
......
......@@ -173,7 +173,7 @@ class _SignInPageState extends State<SignInPage> {
context,
MaterialPageRoute(
builder: (BuildContext context) =>
DashBoard(),
DashBoard(pageNumber: 0),
));
}
}
......