From c77201fecfd2395eab73d37f61f7cc67f913a48f Mon Sep 17 00:00:00 2001 From: daamont Date: Fri, 25 Aug 2023 11:36:19 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=EC=B0=BD=20?= =?UTF-8?q?=EC=9C=84=EC=A0=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pmap/lib/main.dart | 10 +- pmap/lib/views/home/home_screen.dart | 13 +- pmap/lib/views/home/scrollWidget.dart | 17 +- pmap/lib/views/home/searchBar.dart | 205 +++++++++++++++++----- pmap/lib/views/onboarding/onboarding.dart | 14 +- 5 files changed, 189 insertions(+), 70 deletions(-) diff --git a/pmap/lib/main.dart b/pmap/lib/main.dart index d2634cd..4c1eebf 100644 --- a/pmap/lib/main.dart +++ b/pmap/lib/main.dart @@ -10,14 +10,8 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return MaterialApp( - title: 'My Mobile App', - theme: ThemeData( - primarySwatch: Colors.blue, - appBarTheme: const AppBarTheme( - backgroundColor: Colors.white, // 기본 색상 - )), - home: const HomeScreen(), + return const MaterialApp( + home: HomeScreen(), ); } } diff --git a/pmap/lib/views/home/home_screen.dart b/pmap/lib/views/home/home_screen.dart index a2ccffe..2e4b2b3 100644 --- a/pmap/lib/views/home/home_screen.dart +++ b/pmap/lib/views/home/home_screen.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:pmap/views/home/scrollWidget.dart'; +import 'package:pmap/views/home/searchBar.dart'; import 'package:pmap/views/onboarding/onboarding.dart'; class HomeScreen extends StatefulWidget { @@ -10,7 +11,7 @@ class HomeScreen extends StatefulWidget { } class _HomeScreenState extends State { - double height = 300; + // double height = 300; @override Widget build(BuildContext context) { @@ -19,14 +20,18 @@ class _HomeScreenState extends State { body: SafeArea( child: Stack( children: [ - SearchBar(), + Screen0(), Column( - mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Expanded(child: Screen0()), + // Screen0(), + SearchScreen(), + // Expanded(child: Screen0()), + // HomeWidget() ], ), HomeWidget(), + ], ), ), diff --git a/pmap/lib/views/home/scrollWidget.dart b/pmap/lib/views/home/scrollWidget.dart index e348c8d..fec445a 100644 --- a/pmap/lib/views/home/scrollWidget.dart +++ b/pmap/lib/views/home/scrollWidget.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; - import 'hidenavbar.dart'; class HomeWidget extends StatefulWidget { @@ -13,7 +12,7 @@ class HomeWidget extends StatefulWidget { late double _height; final double _lowLimit = 200; - final double _highLimit = 700; + final double _highLimit = 650; final double _upThresh = 100; final double _boundary = 300; final double _downThresh = 350; @@ -31,7 +30,7 @@ class HomeWidget extends StatefulWidget { @override Widget build(BuildContext context) { return Positioned( - bottom: 0.0, + bottom: -10, child: GestureDetector( onVerticalDragUpdate: ((details) { double? delta = details.primaryDelta; @@ -66,9 +65,9 @@ class HomeWidget extends StatefulWidget { }); } }, - duration: const Duration(milliseconds: 400), + duration: const Duration(milliseconds: 100), decoration: const BoxDecoration( - boxShadow: [BoxShadow(blurRadius: 6, spreadRadius: 0.7)], + boxShadow: [BoxShadow(color: Colors.black26, offset: Offset(0, -4), blurRadius: 10, spreadRadius: 0)], color: Colors.white, borderRadius: BorderRadius.vertical(top: Radius.circular(20)) ), @@ -79,14 +78,14 @@ class HomeWidget extends StatefulWidget { const SizedBox( height: 20, ), - Container( - width: 70, + Container( // 위젯 안의 회색 선 + width: 50, height: 4.5, decoration: const BoxDecoration( - color: Colors.grey, + color: Color(0xff614cbb), borderRadius: BorderRadius.all(Radius.circular(10)) ), - ) + ), ], ), ) diff --git a/pmap/lib/views/home/searchBar.dart b/pmap/lib/views/home/searchBar.dart index f39cacd..27a886a 100644 --- a/pmap/lib/views/home/searchBar.dart +++ b/pmap/lib/views/home/searchBar.dart @@ -5,62 +5,173 @@ void main() { runApp(const MyApp()); } -String searchText = ''; - -List items = ['음식점', '카페', '공원', '박물관', '미술관']; -List itmContents = [ - '음식점 Contents', - '카페 Contents', - '공원 Contents', - '박물관 Contents', - '미술관 Contents']; - -class Search extends StatefulWidget { - const Search({Key? key}) : super(key: key); +class SearchScreen extends StatefulWidget { + const SearchScreen({Key? key}) : super(key: key); @override - State createState() => _SearchState(); + State createState() => _SearchScreenState(); } -class _SearchState extends State { +class _SearchScreenState extends State { + TextEditingController searchController = TextEditingController(); + FocusNode focusNode = FocusNode(); + + List items = ['음식점', '카페', '공원', '박물관', '미술관']; + List itmContents = [ + '음식점 Contents', + '카페 Contents', + '공원 Contents', + '박물관 Contents', + '미술관 Contents', + ]; + @override Widget build(BuildContext context) { - return SafeArea( - child: Container( - margin: const EdgeInsets.all(16), - color: Colors.purple.shade100, - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - InkWell( - onTap: () { - // 뒤로가기 버튼 누르면 pop - // 샘플 앱에서는 쌓여있는 위젯이 없어 아래와 같이 코드를 넣으면 - // 검정색 화면만 나오게 됨 - Navigator.of(context).pop(); - }, - child: const Padding( - padding: EdgeInsets.all(8.0), - child: Icon(Icons.arrow_back_ios, size: 18), + return Container( + padding: const EdgeInsets.all(15), + child: Column( + children: [ + Container( + padding: const EdgeInsets.all(10.0), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(10), + ), + child: Row( + children: [ + IconButton( + onPressed: () { + // if (searchController.text.isNotEmpty) { + // setState(() { + // searchController.text = ''; // 검색어 초기화 + // }); + // } else { + // Navigator.of(context).pop(); // 뒤로가기 + // } + }, + icon: searchController.text.isNotEmpty + ? const Icon(Icons.clear) // 검색어가 비어있지 않으면 검색어 초기화 아이콘 + : const Icon(Icons.arrow_back_ios), // 검색어가 비어있으면 뒤로가기 아이콘 ), - ), - const Expanded( - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded(child: Text('강남역[2호선]', textAlign: TextAlign.center)), - Icon(Icons.arrow_right_alt), - Expanded(child: Text('남산서울타워', textAlign: TextAlign.center)), - ], + const SizedBox(width: 16), + Expanded( + child: TextField( + controller: searchController, + decoration: const InputDecoration( + hintText: '검색어를 입력하세요', + border: InputBorder.none, + // fillColor: Colors.white, + // filled: true, + ), + ), ), - ) - - ], + const SizedBox(width: 32), + IconButton( + onPressed: () { + if (searchController.text.isNotEmpty) { + setState(() { + searchController.text = ''; // 검색어 초기화 + }); + } else { + Navigator.of(context).pop(); // 뒤로가기 + } + }, + icon: searchController.text.isNotEmpty + ? const Icon(Icons.clear) // 검색어가 비어있지 않으면 검색어 초기화 아이콘 + : const Icon(Icons.arrow_back_ios), // 검색어가 비어있으면 뒤로가기 아이콘 + ), + // const SizedBox(width: 0), + ], + ), ), - ), + const SizedBox(height: 10), + SizedBox( + height: 50, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Row( + children: [ + GestureDetector( + onTap: () { + String selectedQuery = items[0]; + searchController.text = selectedQuery; + print('선택한 검색어: $selectedQuery'); + }, + child: Container( + width: 82, + height: 32, + margin: const EdgeInsets.all(8), + color: Colors.white, + alignment: Alignment.center, + child: Text(items[0]), + ), + ), + GestureDetector( + onTap: () { + String selectedQuery = items[1]; + searchController.text = selectedQuery; + print('선택한 검색어: $selectedQuery'); + }, + child: Container( + width: 82, + height: 32, + margin: const EdgeInsets.all(8), + color: Colors.white, + alignment: Alignment.center, + child: Text(items[1]), + ), + ), + GestureDetector( + onTap: () { + String selectedQuery = items[2]; + searchController.text = selectedQuery; + print('선택한 검색어: $selectedQuery'); + }, + child: Container( + width: 82, + height: 32, + margin: const EdgeInsets.all(8), + color: Colors.white, + alignment: Alignment.center, + child: Text(items[2]), + ), + ), + GestureDetector( + onTap: () { + String selectedQuery = items[3]; + searchController.text = selectedQuery; + print('선택한 검색어: $selectedQuery'); + }, + child: Container( + width: 82, + height: 32, + margin: const EdgeInsets.all(8), + color: Colors.white, + alignment: Alignment.center, + child: Text(items[3]), + ), + ), + GestureDetector( + onTap: () { + String selectedQuery = items[4]; + searchController.text = selectedQuery; + print('선택한 검색어: $selectedQuery'); + }, + child: Container( + width: 82, + height: 32, + margin: const EdgeInsets.all(8), + color: Colors.white, + alignment: Alignment.center, + child: Text(items[4]), + ), + ), + ], + ), + ), + ), + ], ), ); } -} \ No newline at end of file +} diff --git a/pmap/lib/views/onboarding/onboarding.dart b/pmap/lib/views/onboarding/onboarding.dart index 16f55c6..db30f8a 100644 --- a/pmap/lib/views/onboarding/onboarding.dart +++ b/pmap/lib/views/onboarding/onboarding.dart @@ -1,11 +1,21 @@ import 'package:flutter/material.dart'; class Screen0 extends StatelessWidget { - const Screen0 ({super.key}); + const Screen0({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return const Center(child: Text("온보딩 화면")); + return Container( // Container로 감싸서 배경색을 설정 + color: Colors.lightGreen, // 원하는 배경색으로 변경 + child: const Center( + child: Text( + "온보딩 화면", + style: TextStyle( + color: Colors.white, // 글자 색상을 변경하여 보기 좋게 함 + ), + ), + ), + ); } } // 수정해야 함 \ No newline at end of file From ea6c8713191db507c14f1d40588705cc2cf59358 Mon Sep 17 00:00:00 2001 From: daamont Date: Wed, 6 Sep 2023 17:05:15 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20code=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pmap/lib/views/home/scrollWidget.dart | 12 +- pmap/lib/views/home/searchBar.dart | 161 ++++++++++---------------- 2 files changed, 70 insertions(+), 103 deletions(-) diff --git a/pmap/lib/views/home/scrollWidget.dart b/pmap/lib/views/home/scrollWidget.dart index fec445a..9965ea9 100644 --- a/pmap/lib/views/home/scrollWidget.dart +++ b/pmap/lib/views/home/scrollWidget.dart @@ -11,11 +11,11 @@ class HomeWidget extends StatefulWidget { class _HomeWidgetState extends State { late double _height; - final double _lowLimit = 200; - final double _highLimit = 650; - final double _upThresh = 100; - final double _boundary = 300; - final double _downThresh = 350; + final double _lowLimit = 120; + final double _highLimit = 670; + final double _upThresh = 150; + final double _boundary = 200; + final double _downThresh = 250; final HideNavbar hiding = HideNavbar(); @@ -78,7 +78,7 @@ class HomeWidget extends StatefulWidget { const SizedBox( height: 20, ), - Container( // 위젯 안의 회색 선 + Container( // 위젯 안의 선 width: 50, height: 4.5, decoration: const BoxDecoration( diff --git a/pmap/lib/views/home/searchBar.dart b/pmap/lib/views/home/searchBar.dart index 27a886a..ba3c4c6 100644 --- a/pmap/lib/views/home/searchBar.dart +++ b/pmap/lib/views/home/searchBar.dart @@ -15,6 +15,7 @@ class SearchScreen extends StatefulWidget { class _SearchScreenState extends State { TextEditingController searchController = TextEditingController(); FocusNode focusNode = FocusNode(); + String selectedQuery = ''; List items = ['음식점', '카페', '공원', '박물관', '미술관']; List itmContents = [ @@ -25,6 +26,17 @@ class _SearchScreenState extends State { '미술관 Contents', ]; + bool isSearchIcon = false; + + void toggleSearchMode() { + setState(() { + isSearchIcon = !isSearchIcon; + if (!isSearchIcon) { + searchController.text = ''; + } + }); + } + @override Widget build(BuildContext context) { return Container( @@ -32,7 +44,7 @@ class _SearchScreenState extends State { child: Column( children: [ Container( - padding: const EdgeInsets.all(10.0), + padding: const EdgeInsets.all(5.0), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), @@ -41,28 +53,23 @@ class _SearchScreenState extends State { children: [ IconButton( onPressed: () { - // if (searchController.text.isNotEmpty) { - // setState(() { - // searchController.text = ''; // 검색어 초기화 - // }); - // } else { - // Navigator.of(context).pop(); // 뒤로가기 - // } + Navigator.of(context).pop(); }, - icon: searchController.text.isNotEmpty - ? const Icon(Icons.clear) // 검색어가 비어있지 않으면 검색어 초기화 아이콘 - : const Icon(Icons.arrow_back_ios), // 검색어가 비어있으면 뒤로가기 아이콘 + icon: const Icon(Icons.menu), ), const SizedBox(width: 16), Expanded( child: TextField( controller: searchController, decoration: const InputDecoration( - hintText: '검색어를 입력하세요', + hintText: '장소를 검색하세요', border: InputBorder.none, - // fillColor: Colors.white, - // filled: true, ), + onChanged: (value) { + setState(() { + isSearchIcon = value.isNotEmpty; + }); + }, ), ), const SizedBox(width: 32), @@ -70,17 +77,15 @@ class _SearchScreenState extends State { onPressed: () { if (searchController.text.isNotEmpty) { setState(() { - searchController.text = ''; // 검색어 초기화 - }); - } else { - Navigator.of(context).pop(); // 뒤로가기 + searchController.text = ''; + }); } }, - icon: searchController.text.isNotEmpty - ? const Icon(Icons.clear) // 검색어가 비어있지 않으면 검색어 초기화 아이콘 - : const Icon(Icons.arrow_back_ios), // 검색어가 비어있으면 뒤로가기 아이콘 + icon: isSearchIcon && searchController.text.isNotEmpty + ? const Icon(Icons.clear) + : const Icon(Icons.search), + iconSize: 25, ), - // const SizedBox(width: 0), ], ), ), @@ -91,81 +96,11 @@ class _SearchScreenState extends State { scrollDirection: Axis.horizontal, child: Row( children: [ - GestureDetector( - onTap: () { - String selectedQuery = items[0]; - searchController.text = selectedQuery; - print('선택한 검색어: $selectedQuery'); - }, - child: Container( - width: 82, - height: 32, - margin: const EdgeInsets.all(8), - color: Colors.white, - alignment: Alignment.center, - child: Text(items[0]), - ), - ), - GestureDetector( - onTap: () { - String selectedQuery = items[1]; - searchController.text = selectedQuery; - print('선택한 검색어: $selectedQuery'); - }, - child: Container( - width: 82, - height: 32, - margin: const EdgeInsets.all(8), - color: Colors.white, - alignment: Alignment.center, - child: Text(items[1]), - ), - ), - GestureDetector( - onTap: () { - String selectedQuery = items[2]; - searchController.text = selectedQuery; - print('선택한 검색어: $selectedQuery'); - }, - child: Container( - width: 82, - height: 32, - margin: const EdgeInsets.all(8), - color: Colors.white, - alignment: Alignment.center, - child: Text(items[2]), - ), - ), - GestureDetector( - onTap: () { - String selectedQuery = items[3]; - searchController.text = selectedQuery; - print('선택한 검색어: $selectedQuery'); - }, - child: Container( - width: 82, - height: 32, - margin: const EdgeInsets.all(8), - color: Colors.white, - alignment: Alignment.center, - child: Text(items[3]), - ), - ), - GestureDetector( - onTap: () { - String selectedQuery = items[4]; - searchController.text = selectedQuery; - print('선택한 검색어: $selectedQuery'); - }, - child: Container( - width: 82, - height: 32, - margin: const EdgeInsets.all(8), - color: Colors.white, - alignment: Alignment.center, - child: Text(items[4]), - ), - ), + categoryWidget(items[0], Icons.restaurant_menu), + categoryWidget(items[1], Icons.local_drink), + categoryWidget(items[2], Icons.park), + categoryWidget(items[3], Icons.castle_outlined), + categoryWidget(items[4], Icons.brush) ], ), ), @@ -174,4 +109,36 @@ class _SearchScreenState extends State { ), ); } + + GestureDetector categoryWidget(String text, IconData iconData) { + return GestureDetector( + onTap: () { + setState(() { + searchController.text = text; + isSearchIcon = true; + }); + }, + child: Container( + width: 83, + height: 33, + margin: const EdgeInsets.all(3), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: Colors.white), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + iconData, + size: 18, + color: const Color(0xff9480F2), + ), + const SizedBox(width: 5), + Text(text), + ], + ), + ), + ); + } }