import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';
void main() {
runApp(const BeautyLearningApp());
}
class BeautyLearningApp extends StatelessWidget {
const BeautyLearningApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Beauty Academy',
theme: ThemeData(
primaryColor: const Color(0xFFD81B60), // Beauty Pink Theme
colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFD81B60)),
useMaterial3: true,
),
home: const HomeScreen(),
);
}
}
// 1. Home Screen: Course Categories
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
final List> courses = const [
{
'title': 'Basic Skin Care & Cleansing',
'duration': '15 Mins',
'category': 'Skin Care',
'videoUrl': 'https://assets.mixkit.co/videos/preview/mixkit-woman-applying-facial-cream-41584-large.mp4',
},
{
'title': 'Bridal Base & Contour Setup',
'duration': '25 Mins',
'category': 'Makeup',
'videoUrl': 'https://assets.mixkit.co/videos/preview/mixkit-woman-putting-on-makeup-41583-large.mp4',
},
{
'title': 'Professional Hair Blowdry & Setting',
'duration': '20 Mins',
'category': 'Hair Style',
'videoUrl': 'https://assets.mixkit.co/videos/preview/mixkit-hairdresser-brushing-a-womans-hair-41585-large.mp4',
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Beauty & Parlour Academy', style: TextStyle(fontWeight: FontWeight.bold)),
backgroundColor: const Color(0xFFD81B60),
foregroundColor: Colors.white,
),
body: ListView.builder(
padding: const EdgeInsets.all(12),
itemCount: courses.length,
itemBuilder: (context, index) {
final course = courses[index];
return Card(
elevation: 3,
margin: const EdgeInsets.symmetric(vertical: 8),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: ListTile(
contentPadding: const EdgeInsets.all(12),
leading: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.pink.shade50,
borderRadius: BorderRadius.circular(8),
),
child: const Icon(Icons.play_circle_fill, color: Color(0xFFD81B60), size: 32),
),
title: Text(course['title']!, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
subtitle: Text('${course['category']} • ${course['duration']}'),
trailing: const Icon(Icons.arrow_forward_ios, size: 16),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => VideoPlayerScreen(
title: course['title']!,
videoUrl: course['videoUrl']!,
),
),
);
},
),
);
},
),
);
}
}
// 2. Video Player Screen: Watch Classes
class VideoPlayerScreen extends StatefulWidget {
final String title;
final String videoUrl;
const VideoPlayerScreen({super.key, required this.title, required this.videoUrl});
@override
State createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State {
late VideoPlayerController _videoPlayerController;
ChewieController? _chewieController;
@override
void initState() {
super.initState();
_initPlayer();
}
void _initPlayer() async {
_videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl));
await _videoPlayerController.initialize();
_chewieController = ChewieController(
videoPlayerController: _videoPlayerController,
autoPlay: true,
looping: false,
aspectRatio: _videoPlayerController.value.aspectRatio,
);
setState(() {});
}
@override
void dispose() {
_videoPlayerController.dispose();
_chewieController?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: const Color(0xFFD81B60),
foregroundColor: Colors.white,
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 230,
color: Colors.black,
child: _chewieController != null && _chewieController!.videoPlayerController.value.isInitialized
? Chewie(controller: _chewieController!)
: const Center(child: CircularProgressIndicator(color: Colors.pink)),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(widget.title, style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
const Text(
'Is video me step-by-step techniques batayi gayi hain. Dhyan se dekhein aur practice karein.',
style: TextStyle(color: Colors.grey, fontSize: 14),
),
],
),
)
],
),
);
}
}