Skip to content

Instantly share code, notes, and snippets.

@Aldo111
Created July 13, 2021 05:57
Embed
What would you like to do?
Flutter E-Store Tutorial Part 3 Files
// 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;
}
// 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)))
],
),
)
],
)
],
),
);
}
}
// 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)))),
],
),
),
],
);
}
}
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()));
}
}
// models/product.dart
class Product {
final String name;
final String imagePath;
final int price;
Product(this.name, this.imagePath, this.price);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment