CarrotMarketApp - 내주변 화면 만들기

class RecommendStore {
  String storeName;
  String location;
  String description;
  int commentCount;
  int likeCount;
  String comment;
  String commentUser;
  List storeImages;

  RecommendStore({
    required this.storeName,
    required this.location,
    required this.description,
    required this.commentCount,
    required this.likeCount,
    required this.comment,
    required this.commentUser,
    required this.storeImages,
  });
}

final List searchKeyword = ['인테리어', '학원', '이사', '카페', '용달', '네일', '에어콘'];

List<RecommendStore> recommendStoreList = [
  RecommendStore(
      storeName: '네일가게',
      location: '좌동',
      description: '꼼꼼한시술로 유지력높은 네일샵입니다. 좌동에 위치하고 있습니다.',
      commentCount: 1,
      likeCount: 8,
      commentUser: '이엘리아님',
      comment: '너무편하게 시술해주셔서 잠들었었네요 직모에 짧은 눈썹이라 펌이 잘 안되는 타입인데 너무 이쁘게 됐네요',
      storeImages: [
        'https://github.com/flutter-coder/ui_images/blob/master/carrot_store_1_1.jpg?raw=true',
        'https://github.com/flutter-coder/ui_images/blob/master/carrot_store_1_2.jpg?raw=true',
      ]),
  RecommendStore(
      storeName: '아미아미주먹밥',
      location: '우동',
      description: '2012년 오픈한 해운대도서관 분관쪽에 위치하고 있습니다.',
      commentCount: 2,
      likeCount: 2,
      commentUser: '둘리님',
      comment: '도서관이 근처라 시험기간마다 이용하는데 너무 좋습니다.',
      storeImages: [
        'https://github.com/flutter-coder/ui_images/blob/master/carrot_store_2_1.jpg?raw=true',
        'https://github.com/flutter-coder/ui_images/blob/master/carrot_store_2_2.jpg?raw=true',
      ]),
  RecommendStore(
      storeName: '영어원어민 논술',
      location: '중동',
      description: '원어민 영어 고급논술&디베이트&스피치 전문',
      commentCount: 7,
      likeCount: 1,
      commentUser: 'kkglo님',
      comment: '저희 아들은 학원 주입식이 아닌 살아있는 영어 수업을 할 수 있어서 너무 좋네요',
      storeImages: [
        'https://github.com/flutter-coder/ui_images/blob/master/carrot_store_3_1.jpg?raw=true',
        'https://github.com/flutter-coder/ui_images/blob/master/carrot_store_3_2.jpg?raw=true',
      ]),
  RecommendStore(
      storeName: '삘레빙/코인워시 우동점',
      location: '우동',
      description: '빨래방 / 크린토비아 코인워시 우동점 신설했습니다 많은 이용 바랍니다.',
      commentCount: 11,
      likeCount: 5,
      commentUser: '코인님',
      comment: '처음 방문때 건조기 무료로 서비스 해주셔서 너무 감사 하네요. 앞으로 자주 이용 합니다.',
      storeImages: [
        'https://github.com/flutter-coder/ui_images/blob/master/carrot_store_4_1.jpg?raw=true',
        'https://github.com/flutter-coder/ui_images/blob/master/carrot_store_4_2.jpg?raw=true',
      ])
];

import 'package:carrot_market_ui/screens/components/appbar_preffered_size.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class NearMeScreen extends StatelessWidget {
  const NearMeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("내주변"),
        actions: [
          IconButton(icon: const Icon(CupertinoIcons.pencil), onPressed: (){}),
          IconButton(icon: const Icon(CupertinoIcons.bell), onPressed: (){}),
        ],
        bottom: appBarBottomLine(),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 10),
        ],
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SearchTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        cursorColor: Colors.grey,
        decoration: InputDecoration(
          disabledBorder: _buildOutLineInputBorder(),
          enabledBorder: _buildOutLineInputBorder(),
          focusedBorder: _buildOutLineInputBorder(),
          filled: true,
          fillColor: Colors.grey[200],
          prefixIcon: Icon(
            CupertinoIcons.search,
            color: Colors.grey,
          ),
          contentPadding:
              const EdgeInsets.only(left: 0, bottom: 15, top: 15, right: 0),
          hintText: '좌동 주변 가게를 찾아 보세요.',
          hintStyle: TextStyle(fontSize: 18),
        ),
      ),
    );
  }

  OutlineInputBorder _buildOutLineInputBorder() {
    return OutlineInputBorder(
      borderSide: const BorderSide(width: 0.5, color: Color(0xFFD4D5DD)),
      borderRadius: BorderRadius.circular(8.0),
    );
  }
}

import 'package:carrot_market_ui/screens/components/appbar_preffered_size.dart';
import 'package:carrot_market_ui/screens/components/search_text_field.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class NearMeScreen extends StatelessWidget {
  const NearMeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("내주변"),
        actions: [
          IconButton(icon: const Icon(CupertinoIcons.pencil), onPressed: () {}),
          IconButton(icon: const Icon(CupertinoIcons.bell), onPressed: () {}),
        ],
        bottom: appBarBottomLine(),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 10),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: SearchTextField(),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

class RoundBorderText extends StatelessWidget {
  RoundBorderText({Key? key, required this.title, required this.position})
      : super(key: key);

  final String title;
  final int position;

  @override
  Widget build(BuildContext context) {
    var paddingValue = position == 0 ? 16.0 : 8.0;
    return Padding(
      padding: EdgeInsets.only(left: paddingValue),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(18.0),
          border: Border.all(width: 0.5, color: Colors.grey),
        ),
        child: Text(title,
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../models/recommend_store.dart';
import '../components/appbar_preffered_size.dart';
import 'components/round_border_text.dart';
import 'components/search_text_field.dart';

class NearMeScreen extends StatelessWidget {
  const NearMeScreen({Key? key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("내주변"),
        actions: [
          IconButton(icon: const Icon(CupertinoIcons.pencil), onPressed: () {}),
          IconButton(icon: const Icon(CupertinoIcons.bell), onPressed: () {}),
        ],
        bottom: appBarBottomLine(),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 10),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: SearchTextField(),
          ),
          SizedBox(
            height: 66,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: searchKeyword.length,
              itemBuilder: (context, index) {
                return Center(
                  child: RoundBorderText(
                    title: searchKeyword[index],
                    position: index,
                  ),
                );
              },
            ),
          ),
          Divider(
            color: Colors.grey[100],
            thickness: 10.0,
          )
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

class BottomTitleIcon extends StatelessWidget {
  final IconData iconData;
  final String title;

  const BottomTitleIcon({Key? key, required this.iconData, required this.title})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      child: Column(
        children: [
          Icon(iconData, size: 30),
          Padding(
            padding: const EdgeInsets.only(top: 8),
            child: Text(
              title,
              style: TextStyle(fontSize: 14, color: Colors.black),
            ),
          ),
        ],
      ),
    );
  }

import 'package:carrot_market_ui/screens/near_me/components/bottom_title_icon.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import '../../models/recommend_store.dart';
import '../components/appbar_preffered_size.dart';
import 'components/round_border_text.dart';
import 'components/search_text_field.dart';

class NearMeScreen extends StatelessWidget {
  const NearMeScreen({Key? key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("내주변"),
        actions: [
          IconButton(icon: const Icon(CupertinoIcons.pencil), onPressed: () {}),
          IconButton(icon: const Icon(CupertinoIcons.bell), onPressed: () {}),
        ],
        bottom: appBarBottomLine(),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: SearchTextField(),
          ),
          SizedBox(
            height: 66,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: searchKeyword.length,
              itemBuilder: (context, index) {
                return Center(
                  child: RoundBorderText(
                    title: searchKeyword[index],
                    // 4
                    position: index,
                  ),
                );
              },
            ),
          ),
          Divider(
            color: Colors.grey[100],
            thickness: 10.0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 16, top: 30),
            child: Wrap(
              alignment: WrapAlignment.start,
              spacing: 22.0,
              runSpacing: 30,
              children: [
                BottomTitleIcon(title: "운동", iconData: FontAwesomeIcons.dumbbell),
                BottomTitleIcon(title: "미용실", iconData: FontAwesomeIcons.scissors),
                BottomTitleIcon(title: "구인구직", iconData: FontAwesomeIcons.user),
                BottomTitleIcon(title: "과외/클래스", iconData: FontAwesomeIcons.edit),
                BottomTitleIcon(title: "농수산물", iconData: FontAwesomeIcons.appleAlt),
                BottomTitleIcon(title: "부동산", iconData: FontAwesomeIcons.hotel),
                BottomTitleIcon(title: "중고차", iconData: FontAwesomeIcons.car),
                BottomTitleIcon(title: "전시/행사", iconData: FontAwesomeIcons.chessBishop),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

import '../../../models/recommend_store.dart';
import '../../../theme.dart';

class StoreItem extends StatelessWidget {
  final RecommendStore recommendStore;

  const StoreItem({Key? key, required this.recommendStore}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), border: Border.all(width: 0.3, color: Colors.grey)),
      width: 289,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              buildClipRRect(topLeft: 10),
              const SizedBox(width: 2),
              buildClipRRect(topRight: 10),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text.rich(
                  TextSpan(
                    children: [
                      TextSpan(text: '${recommendStore.storeName} ', style: textTheme().displayLarge), // TODO 07 수정
                      TextSpan(text: '${recommendStore.location}'),
                    ],
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  '${recommendStore.description}',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: textTheme().titleMedium, // TODO 07 수정
                ),
                const SizedBox(height: 8),
                Text.rich(
                  TextSpan(
                    children: [
                      TextSpan(text: '후기 ${recommendStore.commentCount}', style: TextStyle(fontSize: 15, color: Colors.blue)),
                      TextSpan(
                        text: ' • 관심 ${recommendStore.likeCount}',
                        style: textTheme().titleMedium, // TODO 07 수정
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: Container(
              margin: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(color: Colors.grey[200], borderRadius: BorderRadius.circular(10)),
              child: Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                        text: '${recommendStore.commentUser},', style: TextStyle(fontSize: 13, color: Colors.black, fontWeight: FontWeight.bold)),
                    TextSpan(text: '${recommendStore.comment}', style: TextStyle(fontSize: 12, color: Colors.black)),
                  ],
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          )
        ],
      ),
    );
  }

  ClipRRect buildClipRRect({double topLeft = 0, double topRight = 0}) {
    return ClipRRect(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(topLeft), topRight: Radius.circular(topRight)),
      child: Image.network(
        recommendStore.storeImages[0],
        width: 143,
        height: 100,
        fit: BoxFit.cover,
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import '../../models/recommend_store.dart';
import '../../theme.dart';
import '../components/appbar_preffered_size.dart';
import 'components/bottom_title_icon.dart';
import 'components/round_border_text.dart';
import 'components/search_text_field.dart';
import 'components/store_item.dart';

class NearMeScreen extends StatelessWidget {
  const NearMeScreen({Key? key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("내주변"),
        actions: [
          IconButton(icon: const Icon(CupertinoIcons.pencil), onPressed: () {}),
          IconButton(icon: const Icon(CupertinoIcons.bell), onPressed: () {}),
        ],
        bottom: appBarBottomLine(),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: SearchTextField(),
          ),
          SizedBox(
            height: 66,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: searchKeyword.length,
              itemBuilder: (context, index) {
                return Center(
                  child: RoundBorderText(
                    title: searchKeyword[index],
                    position: index,
                  ),
                );
              },
            ),
          ),
          Divider(
            color: Colors.grey[100],
            thickness: 10.0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 16, top: 30),
            child: Wrap(
              alignment: WrapAlignment.start,
              spacing: 10.0,
              runSpacing: 30,
              children: [
                BottomTitleIcon(title: "운동", iconData: FontAwesomeIcons.dumbbell),
                BottomTitleIcon(title: "미용실", iconData: FontAwesomeIcons.scissors),
                BottomTitleIcon(title: "구인구직", iconData: FontAwesomeIcons.user),
                BottomTitleIcon(title: "과외/클래스", iconData: FontAwesomeIcons.edit),
                BottomTitleIcon(title: "농수산물", iconData: FontAwesomeIcons.appleAlt),
                BottomTitleIcon(title: "부동산", iconData: FontAwesomeIcons.hotel),
                BottomTitleIcon(title: "중고차", iconData: FontAwesomeIcons.car),
                BottomTitleIcon(title: "전시/행사", iconData: FontAwesomeIcons.chessBishop),
              ],
            ),
          ),
          const SizedBox(height: 50),
          Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Text('이웃들의 추천 가게', style: textTheme().displayMedium), // TODO 07 수정
          ),
          const SizedBox(height: 20),
          Container(
            height: 288,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: recommendStoreList.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.only(left: 16),
                  child: StoreItem(
                    recommendStore: recommendStoreList[index],
                  ),
                );
              },
            ),
          ),
          SizedBox(height: 40)
        ],
      ),
    );
  }
}