Skip to content

Commit

Permalink
Merge pull request #40 from 2024-Saphy/feat/SAPHY-31-mainpage
Browse files Browse the repository at this point in the history
feat : 캐러셀 추가, 오류 해결
  • Loading branch information
devlwh0830 authored Sep 16, 2024
2 parents 946df6a + ce9b48c commit 779f69f
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 76 deletions.
72 changes: 4 additions & 68 deletions lib/screens/main/main_screen.dart
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:saphy/models/product.dart';
import 'package:saphy/utils/colors.dart';
import 'package:saphy/utils/textstyles.dart';
import 'package:saphy/widgets/carousel.dart';
import 'package:saphy/widgets/product_card.dart';

class MainScreen extends StatefulWidget {
Expand Down Expand Up @@ -101,75 +101,11 @@ class _MainScreenState extends State<MainScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xfff4f4f4),
backgroundColor: altWhite,
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 575,
decoration: const BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
"https://i.pinimg.com/736x/cf/aa/d7/cfaad78b35a7b752054dd564b77f1f10.jpg",
),
fit: BoxFit.cover),
),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 50,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 25,
width: 100,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/SaphyLogoSmallWhite.png'),
fit: BoxFit.cover,
),
),
),
Container(
height: 25,
width: 25,
decoration: const BoxDecoration(
image: DecorationImage(
image:
AssetImage('assets/images/notifications.png'),
fit: BoxFit.cover,
),
),
),
],
),
const Spacer(),
const Text(
"Phone",
style: TextStyle(color: white, fontSize: 25),
),
const Text(
"iPhone 15도\nSaphy에서.",
style: TextStyle(
color: white,
fontFamily: 'Pretendard',
fontWeight: FontWeight.bold,
fontSize: 50,
height: 1.2),
),
const SizedBox(
height: 60,
)
],
),
),
),
const SliverToBoxAdapter(
child: Carousel(),
),
const SliverToBoxAdapter(
child: SizedBox(
Expand Down
4 changes: 2 additions & 2 deletions lib/screens/products/product_detail_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ class ProductDetail extends StatelessWidget {
flex: 1,
child: InkWell(
child: Container(
width: 150,
width: screenWidth * 0.3,
decoration: BoxDecoration(
color: const Color(0xff404756),
borderRadius:
Expand All @@ -267,7 +267,7 @@ class ProductDetail extends StatelessWidget {
flex: 1,
child: InkWell(
child: Container(
width: 150,
width: screenWidth * 0.3,
decoration: BoxDecoration(
color: const Color(0xff404756),
borderRadius:
Expand Down
15 changes: 9 additions & 6 deletions lib/widgets/bottom_nav_bar.dart
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ class BottomNavBar extends StatelessWidget {

@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
return SizedBox(
width: screenWidth,
height: 70,
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
Expand All @@ -24,29 +26,30 @@ class BottomNavBar extends StatelessWidget {
selectedItemColor: mainPrimary,
unselectedItemColor: altBlack,
onTap: onTap,
items: const <BottomNavigationBarItem>[
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.house, size: 20.0),
icon: FaIcon(FontAwesomeIcons.house, size: screenWidth / 25),
label: "홈",
),
//BottomNavigationBarItem(
// icon: Icon(Icons.build),
// label: "수리센터",
// ),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.magnifyingGlass, size: 20.0),
icon: FaIcon(FontAwesomeIcons.magnifyingGlass,
size: screenWidth / 25),
label: "탐색",
),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.solidGem, size: 20.0),
icon: FaIcon(FontAwesomeIcons.solidGem, size: screenWidth / 25),
label: "판매",
),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.solidHeart, size: 20.0),
icon: FaIcon(FontAwesomeIcons.solidHeart, size: screenWidth / 25),
label: "찜 목록",
),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.solidUser, size: 20.0),
icon: FaIcon(FontAwesomeIcons.solidUser, size: screenWidth / 25),
label: "나의 사피",
),
],
Expand Down
106 changes: 106 additions & 0 deletions lib/widgets/carousel.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:saphy/utils/colors.dart';

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

@override
Widget build(BuildContext context) {
const itemList = [
(
link:
"https://i.pinimg.com/736x/cf/aa/d7/cfaad78b35a7b752054dd564b77f1f10.jpg",
type: "Phone",
content: "iPhone 15도\nSaphy에서.",
color: Colors.white,
),
(
link:
"https://i.pinimg.com/736x/d3/81/bb/d381bbb3036599443634fef9503d888c.jpg",
type: "Collaboration",
content: "전 세계를 홀린\nKirby와의 콜라보!",
color: Colors.black
),
];
int totalCount = itemList.length;
return SizedBox(
child: CarouselSlider.builder(
itemCount: itemList.length,
options: CarouselOptions(
height: 575,
viewportFraction: 1,
enlargeCenterPage: false,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 5),
),
itemBuilder: (context, index, realIndex) {
return contentBuilder(
itemList[index].link,
itemList[index].type,
itemList[index].content,
itemList[index].color,
realIndex,
totalCount,
);
},
),
);
}

Container contentBuilder(String link, String type, String content,
Color color, int index, int totalCount) {
return Container(
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
link,
),
fit: BoxFit.cover),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
type,
style: TextStyle(color: color, fontSize: 25),
),
Text(
content,
style: TextStyle(
color: color,
fontFamily: 'Pretendard',
fontWeight: FontWeight.bold,
fontSize: 50,
height: 1.2),
),
const SizedBox(
height: 30,
),
// SizedBox(
// height: 3,
// width: 280,
// child: Row(
// children: [
// Expanded(flex: index, child: Container(color: color)),
// Expanded(
// flex: totalCount + index,
// child: Container(
// color:
// color == Colors.white ? Colors.black : Colors.white,
// ),
// ),
// ],
// ),
// ),
],
),
),
);
}
}
1 change: 1 addition & 0 deletions pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ dependencies:
remedi_kopo: ^0.0.2
simple_shadow: ^0.3.1
toggle_list: ^0.3.1
carousel_slider: ^5.0.0

dev_dependencies:
flutter_lints: ^4.0.0
Expand Down

0 comments on commit 779f69f

Please sign in to comment.