쇼핑카트 앱 만들기

theme.dart

import 'package:flutter/material.dart';
import 'package:shopapp/constants.dart';

ThemeData theme() {
  return ThemeData(
    primarySwatch: kPrimaryColor,
    scaffoldBackgroundColor: kPrimaryColor,
  );
}

constants.dart

import 'package:flutter/material.dart';

const kPrimaryColor = MaterialColor(
  0xFFeeeee,
  <int, Color>{
    50: Color(0xFFeeeeee),
    100: Color(0xFFeeeeee),
    200: Color(0xFFeeeeee),
    300: Color(0xFFeeeeee),
    400: Color(0xFFeeeeee),
    500: Color(0xFFeeeeee),
    600: Color(0xFFeeeeee),
    700: Color(0xFFeeeeee),
    800: Color(0xFFeeeeee),
    900: Color(0xFFeeeeee),
  },
);

const kSecondaryColor = Color(0xFFc6c6c6);
const kAccentColor = Color(0xFFff7643);

main.dart

import 'package:flutter/material.dart';
import 'package:shopapp/components/shoppingcart_detail.dart';
import 'package:shopapp/components/shoppingcart_header.dart';
import 'package:shopapp/theme.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: theme(),
      home: ShoppingCartPage(),
    );
  }
}

class ShoppingCartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildShoppingCartAppBar(),
      body: Column(
        children: [
          ShoppingcartHeader(),
          Expanded(child: ShoppingCartDetail()),
        ],
      ),
    );
  }
}

AppBar _buildShoppingCartAppBar() {
  return AppBar(
    leading: IconButton(
      onPressed: () {},
      icon: Icon(Icons.arrow_back),
    ),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.shopping_cart),
      ),
    ],
    elevation: 0.0,
  );
}

shoppingcart_header.dart

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

class ShoppingcartHeader extends StatefulWidget {
  @override
  State<ShoppingcartHeader> createState() => _ShoppingcartHeaderState();
}

class _ShoppingcartHeaderState extends State<ShoppingcartHeader> {
  int selectedId = 0;

  List<String> selectedPic = [
    "assets/p1.jpeg",
    "assets/p2.jpeg",
    "assets/p3.jpeg",
    "assets/p4.jpeg",
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _buildHeaderPic(),
        _buildHeaderSelector(),
      ],
    );
  }

  Widget _buildHeaderPic() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: AspectRatio(
        aspectRatio: 5 / 3,
        child: Image.asset(
          selectedPic[selectedId],
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildHeaderSelector() {
    return Padding(
      padding: const EdgeInsets.only(
        left: 30,
        right: 30,
        top: 10,
        bottom: 30,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildHeaderSelectorButton(0, Icons.directions_bike),
          _buildHeaderSelectorButton(0, Icons.motorcycle),
          _buildHeaderSelectorButton(0, CupertinoIcons.car_detailed),
          _buildHeaderSelectorButton(0, CupertinoIcons.airplane),
        ],
      ),
    );
  }

  Widget _buildHeaderSelectorButton(int id, IconData mIcon) {
    return Container(
      width: 70,
      height: 70,
      decoration: BoxDecoration(
        color: id == selectedId ? kAccentColor : kSecondaryColor,
        borderRadius: BorderRadius.circular(20),
      ),
      child: IconButton(
        onPressed: () {
          setState(() {
            selectedId = id;
          });
        },
        icon: Icon(mIcon, color: Colors.black),
      ),
    );
  }
}

shoppingcart_detail.dart

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

class ShoppingCartDetail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(40),
      ),
      child: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildDetailNameAndPrice(),
            _buildDetailRatingAndReviewCount(),
            _buildDetailColorOptions(),
            _buildDetailButton(context),
          ],
        ),
      ),
    );
  }
}

Widget _buildDetailRatingAndReviewCount() {
  return Padding(
    padding: EdgeInsets.only(
      bottom: 20,
    ),
    child: Row(
      children: [
        Icon(
          Icons.star,
          color: Colors.yellow,
        ),
        Icon(
          Icons.star,
          color: Colors.yellow,
        ),
        Icon(
          Icons.star,
          color: Colors.yellow,
        ),
        Icon(
          Icons.star,
          color: Colors.yellow,
        ),
        Icon(
          Icons.star,
          color: Colors.yellow,
        ),
        Spacer(),
        Text("Review"),
        Text(("(26)"), style: TextStyle(color: Colors.blue)),
      ],
    ),
  );
}

Widget _buildDetailNameAndPrice() {
  return Padding(
    padding: EdgeInsets.only(bottom: 10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          "Urban soft AL 10.0",
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          "\$699",
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
  );
}

Widget _buildDetailColorOptions() {
  return Padding(
    padding: EdgeInsets.only(bottom: 20),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("Color Options"),
        SizedBox(height: 10),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildDetailIcon(Colors.black),
            _buildDetailIcon(Colors.green),
            _buildDetailIcon(Colors.orange),
            _buildDetailIcon(Colors.grey),
            _buildDetailIcon(Colors.white),
          ],
        ),
      ],
    ),
  );
}

Widget _buildDetailIcon(Color mColor) {
  return Padding(
    padding: EdgeInsets.only(right: 10),
    child: Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(),
            shape: BoxShape.circle,
          ),
        ),
        Positioned(
          child: ClipOval(
            child: Container(
              color: mColor,
              width: 40,
              height: 40,
            ),
          ),
        ),
      ],
    ),
  );
}

Widget _buildDetailButton(BuildContext context) {
  return Align(
    child: TextButton(
      onPressed: () {
        showCupertinoDialog(
            context: context,
            builder: (context) => CupertinoAlertDialog(
                  title: Text("장바구니에 담으시겠습니까?"),
                  actions: [
                    CupertinoDialogAction(
                      child: Text("확인"),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    )
                  ],
                ));
      },
      style: TextButton.styleFrom(
        backgroundColor: kAccentColor,
        minimumSize: Size(300, 50),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
      ),
      child: Text(
        "Add to Cart",
        style: TextStyle(color: Colors.white),
      ),
    ),
  );
}