Flutter E-Store Tutorial Part 3 Files

app_style.dart

// constants/app_style.dart

import 'package:flutter/material.dart';

abstract class AppStyle {
  static const primaryColor = Color(0xFFFDFDFD);
  static const secondaryColor = Color(0xFF252525);

  static const backgroundGrey = Color(0xFF383838);
  static const captionColor = Color(0xFFbababa);

  static const double iconSize = 36.0;
  static const double padding = 24.0;
}

headphone_banner.dart

// widgets/headphone_banner.dart

import 'package:curvy_background/constants/app_style.dart';
import 'package:curvy_background/models/product.dart';
import 'package:flutter/material.dart';

class HeadphoneBanner extends StatelessWidget {
  final Product product;

  HeadphoneBanner(this.product);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Stack(
        children: [
          Positioned(
            top: 40,
            left: 0,
            right: 0,
            child: Container(
              height: 160,
              decoration: BoxDecoration(
                  color: AppStyle.secondaryColor,
                  borderRadius: BorderRadius.circular(36)),
            ),
          ),
          Row(
            children: [
              Image.asset(product.imagePath, height: 200),
              Padding(
                padding: const EdgeInsets.only(top: 40.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      padding: const EdgeInsets.all(4),
                      decoration: BoxDecoration(
                        color: AppStyle.backgroundGrey,
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: Text('New Product',
                          style: TextStyle(
                              color: AppStyle.captionColor,
                              fontSize: 12,
                              fontWeight: FontWeight.bold)),
                    ),
                    SizedBox(height: 8),
                    Text(product.name,
                        style: TextStyle(
                            color: AppStyle.primaryColor,
                            fontSize: 16,
                            fontWeight: FontWeight.w600)),
                    SizedBox(height: 4),
                    TextButton(
                        onPressed: () {},
                        child: Text(
                          'Buy Now',
                          style: TextStyle(
                            color: AppStyle.primaryColor,
                          ),
                        ),
                        style: TextButton.styleFrom(
                            backgroundColor: Colors.red,
                            primary: Colors.yellow,
                            padding: const EdgeInsets.symmetric(
                                vertical: 4, horizontal: 12),
                            minimumSize: Size(5, 5)))
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

home_screen.dart

// screens/home_screen.dart

import 'package:curvy_background/constants/app_style.dart';
import 'package:curvy_background/models/product.dart';
import 'package:curvy_background/widgets/headphone_banner.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Stack(
            children: [
              Container(color: AppStyle.secondaryColor),
              Container(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: AppStyle.padding),
                    child: Column(children: [
                      HeadphoneBanner(Product(
                        'Headphone X1',
                        'assets/images/headphones.png',
                        100,
                      )),
                    ]),
                  ),
                  decoration: BoxDecoration(
                      color: AppStyle.primaryColor,
                      borderRadius:
                          BorderRadius.only(bottomLeft: Radius.circular(88)))),
            ],
          ),
        ),
        Container(
          height: 200,
          child: Stack(
            children: [
              Container(color: AppStyle.primaryColor),
              Container(
                  decoration: BoxDecoration(
                      color: AppStyle.secondaryColor,
                      borderRadius:
                          BorderRadius.only(topRight: Radius.circular(88)))),
            ],
          ),
        ),
      ],
    );
  }
}

main.dart

import 'package:curvy_background/constants/app_style.dart';
import 'package:curvy_background/screens/home_screen.dart';
import 'package:flutter/material.dart';

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

const imageUrl =
    'https://upload.wikimedia.org/wikipedia/commons/a/a0/Arh-avatar.jpg';

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
            primarySwatch: Colors.blue,
            appBarTheme: AppBarTheme(
                backgroundColor: AppStyle.primaryColor,
                iconTheme: IconThemeData(
                  color: AppStyle.secondaryColor,
                  size: AppStyle.iconSize,
                ))),
        home: Scaffold(
            appBar: AppBar(
              leading: Padding(
                padding: const EdgeInsets.only(left: 16.0),
                child: Icon(
                  Icons.grid_view,
                ),
              ),
              elevation: 0,
              actions: [
                IconButton(
                  iconSize: AppStyle.iconSize,
                  onPressed: () {},
                  icon: Icon(Icons.search),
                ),
                Stack(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ClipRRect(
                        child: Image.network(
                          imageUrl,
                          width: 36,
                        ),
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    Positioned(
                      top: 3,
                      right: 3,
                      child: Container(
                          width: 12,
                          height: 12,
                          decoration: BoxDecoration(
                              color: Colors.red,
                              borderRadius: BorderRadius.circular(12))),
                    ),
                  ],
                ),
                SizedBox(width: 16),
              ],
            ),
            body: HomeScreen()));
  }
}

product.dart

// models/product.dart

class Product {
  final String name;
  final String imagePath;
  final int price;

  Product(this.name, this.imagePath, this.price);
}