Birthday wishing app in flutter
Hello everyone welcome to our new article in this article I am created a simple birthday wishing app in flutter. you can follow step wise step this article for creating this app .
Step 1. Create a new flutter project with name of birthday_wishing
Step 2. Go to google and search a package https://pub.dev/packages/confetti and add into your pubspec.yaml file and add this dependency
Step 3. Create a constant.dart file for all constant file & methods
import 'package:flutter/cupertino.dart';
class AppConstant {
static double height(BuildContext context) {
return MediaQuery.of(context).size.height;
}
static double width(BuildContext context) {
return MediaQuery.of(context).size.width;
}
}
Step 4. Create wish_screen.dart file for wishing screen
import 'dart:async';
import 'dart:math';
import 'package:birthday_wishing/constant.dart';
import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
class WishScreen extends StatefulWidget {
const WishScreen({Key? key, required this.name}) : super(key: key);
final String name;
@override
State<WishScreen> createState() => _WishScreenState();
}
class _WishScreenState extends State<WishScreen> {
late ConfettiController _controllerCenterRight;
late ConfettiController _controllerCenterLeft;
@override
void initState() {
// TODO: implement initState
super.initState();
_controllerCenterRight =
ConfettiController(duration: const Duration(seconds: 10));
_controllerCenterLeft =
ConfettiController(duration: const Duration(seconds: 10));
Timer.periodic(const Duration(seconds: 3), (timer) {
_controllerCenterRight.play();
_controllerCenterLeft.play();
setState(() {});
});
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_controllerCenterRight.dispose();
_controllerCenterLeft.dispose();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover, image: AssetImage("assets/bg1.jpg"))),
child: Stack(
children: [
Container(
height: AppConstant.height(context) * 0.27,
width: AppConstant.width(context),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
image: AssetImage("assets/bg2.jpg"))),
),
//TOP RIGHT -- Emit left
Align(
alignment: Alignment.topRight,
child: ConfettiWidget(
confettiController: _controllerCenterRight,
blastDirection: pi,
// radial value - LEFT
particleDrag: 0.05,
// apply drag to the confetti
emissionFrequency: 0.05,
// how often it should emit
numberOfParticles: 20,
// number of particles to emit
gravity: 0.05,
// gravity - or fall speed
shouldLoop: false,
colors: const [Colors.green, Colors.blue, Colors.pink],
// manually specify the colors to be used
strokeWidth: 1,
strokeColor: Colors.white,
),
),
//TOP LEFT - Emit right
Align(
alignment: Alignment.topLeft,
child: ConfettiWidget(
confettiController: _controllerCenterLeft,
blastDirection: 0,
// radial value - RIGHT
emissionFrequency: 0.6,
minimumSize: const Size(10, 10),
// set the minimum potential size for the confetti (width, height)
maximumSize: const Size(30, 50),
// set the maximum potential size for the confetti (width, height)
numberOfParticles: 1,
gravity: 0.1,
),
),
Positioned(
top: 121,
left: 100,
child: Center(
child: Container(
padding: EdgeInsets.all(10),
child: Text(
widget.name,
style: const TextStyle(
fontSize: 45,
fontWeight: FontWeight.bold,
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 2.0),
blurRadius: 5.0,
color: Colors.red,
),
Shadow(
offset: Offset(1.0, 2.0),
blurRadius: 8.0,
color: Colors.white,
),
],
color: Colors.tealAccent),
),
),
),
),
],
),
),
),
);
}
}
Step 5. Create a home_screen.dart file
import 'package:birthday_wishing/constant.dart';
import 'package:birthday_wishing/wish_screen.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: AppConstant.height(context),
width: AppConstant.width(context),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover, image: AssetImage("assets/bg.jpeg"))),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: AppConstant.height(context) * 0.4,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 21),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.redAccent),
borderRadius: BorderRadius.all(Radius.circular(21))),
child: TextFormField(
controller: controller,
decoration: const InputDecoration(
hintText: "Type Name of loved one's",
contentPadding: EdgeInsets.symmetric(horizontal: 10),
border: InputBorder.none),
),
),
SizedBox(
height: AppConstant.height(context) * 0.04,
),
Container(
width: AppConstant.width(context),
height: AppConstant.height(context) * 0.06,
margin: EdgeInsets.symmetric(horizontal: 21),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.redAccent),
borderRadius: BorderRadius.all(Radius.circular(21))),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(21),
),
),
onPressed: () {
if (controller.text.trim().isNotEmpty) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => WishScreen(
name: controller.text,
)));
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Please Enter Name')));
}
},
child: const Text(
"Next",
style: TextStyle(
fontSize: 21,
color: Colors.redAccent,
fontWeight: FontWeight.bold),
)),
),
const SizedBox(
height: 200,
),
],
),
),
),
);
}
}
Step 5. Replace HomeScreen into myApp
import 'package:birthday_wishing/home_screen.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomeScreen(),
);
}
}
Conclusion : In this article we have created a Birthday wishing app using flutter. and we learn how to use confetti 0.7.0 plugin.
