홈 위젯

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(),
     );
   }
 }

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<HomeScreen> {
-  double height = 300;
+  // double height = 300;
 
   @override
   Widget build(BuildContext context) {
@@ -19,14 +20,18 @@ class _HomeScreenState extends State<HomeScreen> {
       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(),
+
           ],
         ),
       ),

pmap/lib/views/home/scrollWidget.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-
 import 'hidenavbar.dart';
 
 class HomeWidget extends StatefulWidget {
@@ -12,11 +11,11 @@ class HomeWidget extends StatefulWidget {
   class _HomeWidgetState extends State<HomeWidget> {
     late double _height;
 
-    final double _lowLimit = 200;
-    final double _highLimit = 700;
-    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();
 
@@ -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))
               ),
-            )
+            ),
           ],
         ),
         )

pmap/lib/views/home/searchBar.dart

@@ -5,62 +5,140 @@ void main() {
   runApp(const MyApp());
 }
 
-String searchText = '';
-
-List<String> items = ['음식점', '카페', '공원', '박물관', '미술관'];
-List<String> 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<Search> createState() => _SearchState();
+  State<SearchScreen> createState() => _SearchScreenState();
 }
 
-class _SearchState extends State<Search> {
+class _SearchScreenState extends State<SearchScreen> {
+  TextEditingController searchController = TextEditingController();
+  FocusNode focusNode = FocusNode();
+  String selectedQuery = '';
+
+  List<String> items = ['음식점', '카페', '공원', '박물관', '미술관'];
+  List<String> itmContents = [
+    '음식점 Contents',
+    '카페 Contents',
+    '공원 Contents',
+    '박물관 Contents',
+    '미술관 Contents',
+  ];
+
+  bool isSearchIcon = false;
+
+  void toggleSearchMode() {
+    setState(() {
+      isSearchIcon = !isSearchIcon;
+      if (!isSearchIcon) {
+        searchController.text = '';
+      }
+    });
+  }
+
   @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(5.0),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: Row(
+              children: [
+                IconButton(
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                  },
+                  icon: const Icon(Icons.menu),
                 ),
-              ),
-              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,
+                    ),
+                    onChanged: (value) {
+                      setState(() {
+                        isSearchIcon = value.isNotEmpty;
+                      });
+                    },
+                  ),
                 ),
-                )
-
-            ],
+                const SizedBox(width: 32),
+                IconButton(
+                  onPressed: () {
+                    if (searchController.text.isNotEmpty) {
+                      setState(() {
+                      searchController.text = '';
+                    });
+                    }
+                  },
+                  icon: isSearchIcon && searchController.text.isNotEmpty
+                      ? const Icon(Icons.clear)
+                      : const Icon(Icons.search),
+                  iconSize: 25,
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 10),
+          SizedBox(
+            height: 50,
+            child: SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Row(
+                children: [
+                  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)
+                ],
+              ),
+            ),
           ),
-        ),
+        ],
       ),
     );
   }
-}
+
+  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),
+                        ],
+                      ),
+                      ),
+                );
+  }
+}

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, // 글자 색상을 변경하여 보기 좋게 함
+          ),
+        ),
+      ),
+    );
   }
 }
 // 수정해야 함