🔨 Create Rating Bar - ChunhThanhDe

rating_bar_screen/lib/homepage.dart

@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:rating_bar_screen/slider_widget.dart';
+import 'package:video_player/video_player.dart';
+
+class Homepage extends StatefulWidget {
+ const Homepage({super.key});
+
+ @override
+ State<Homepage> createState() => _HomepageState();
+}
+
+class _HomepageState extends State<Homepage> {
+ double _lowerValue = 9.0;
+ VideoPlayerController? _controller;
+ String emotion = "I love it so much!!!!!";
+
+ @override
+ void initState() {
+ super.initState();
+ _updateVideo(_getVideoPath(_lowerValue));
+ }
+
+ void _updateVideo(String path) {
+ _controller?.dispose(); // Dispose old controller
+ _controller = VideoPlayerController.asset(path)
+ ..initialize().then((_) {
+ setState(() {});
+ _controller
+ ?..setLooping(true)
+ ..play();
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ backgroundColor: Colors.black,
+ body: Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ const Text(
+ "How's your day",
+ style: TextStyle(
+ fontSize: 32,
+ color: Color(0xFF69708D),
+ fontWeight: FontWeight.w700),
+ ),
+ const SizedBox(height: 20),
+ _buildVideoPlayer(),
+ const SizedBox(height: 20),
+ Text(
+ emotion,
+ style: const TextStyle(
+ fontSize: 32,
+ color: Color(0xFF69708D),
+ fontWeight: FontWeight.w700),
+ ),
+ SliderWidget(
+ lowerValue: _lowerValue,
+ onDragging: (value) {
+ setState(() {
+ _lowerValue = value;
+ emotion = _getEmotion(value);
+ });
+ },
+ onDragCompleted: (value) {
+ setState(() {
+ _lowerValue = value;
+ _updateVideo(_getVideoPath(value));
+ });
+ },
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+
+ Widget _buildVideoPlayer() {
+ if (_controller != null && _controller!.value.isInitialized) {
+ return AspectRatio(
+ aspectRatio: _controller!.value.aspectRatio,
+ child: VideoPlayer(_controller!),
+ );
+ } else {
+ return SizedBox(height: MediaQuery.of(context).size.width);
+ }
+ }
+
+ @override
+ void dispose() {
+ _controller?.dispose();
+ super.dispose();
+ }
+
+ String _getEmotion(double value) {
+ if (value >= 8.0) return "I love it so much !!!!!";
+ if (value >= 7.0) return "I'm really love it!";
+ if (value >= 6.0) return "It's awesome.";
+ if (value >= 5.0) return "It wow.";
+ if (value >= 4.0) return "I am okay..";
+ if (value >= 3.0) return "It's not that good.";
+ if (value >= 2.0) return "Very bad!";
+ if (value >= 1.0) return "That's horrible.";
+ return "Angry so much !!?!";
+ }
+
+ String _getVideoPath(double value) {
+ if (value >= 8.0) return "assets/8-celebrate.webm";
+ if (value >= 7.0) return "assets/7-loveit.webm";
+ if (value >= 6.0) return "assets/5-awesome.webm";
+ if (value >= 5.0) return "assets/6-wow.webm";
+ if (value >= 4.0) return "assets/4-okay.webm";
+ if (value >= 3.0) return "assets/3-notgood.webm";
+ if (value >= 2.0) return "assets/2-verybad.webm";
+ if (value >= 1.0) return "assets/1-terrible.webm";
+ return "assets/0-angry.webm";
+ }
+}

rating_bar_screen/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:rating_bar_screen/homepage.dart';
 
 void main() {
  runApp(const MyApp());
@@ -7,119 +8,11 @@ void main() {
 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',
- theme: ThemeData(
- // This is the theme of your application.
- //
- // TRY THIS: Try running your application with "flutter run". You'll see
- // the application has a purple toolbar. Then, without quitting the app,
- // try changing the seedColor in the colorScheme below to Colors.green
- // and then invoke "hot reload" (save your changes or press the "hot
- // reload" button in a Flutter-supported IDE, or press "r" if you used
- // the command line to start the app).
- //
- // Notice that the counter didn't reset back to zero; the application
- // state is not lost during the reload. To reset the state, use hot
- // restart instead.
- //
- // This works for code too, not just values: Most code changes can be
- // tested with just a hot reload.
- colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
- useMaterial3: true,
- ),
- home: const MyHomePage(title: 'Flutter Demo Home Page'),
- );
- }
-}
-
-class MyHomePage extends StatefulWidget {
- const MyHomePage({super.key, required this.title});
-
- // This widget is the home page of your application. It is stateful, meaning
- // that it has a State object (defined below) that contains fields that affect
- // how it looks.
-
- // This class is the configuration for the state. It holds the values (in this
- // case the title) provided by the parent (in this case the App widget) and
- // used by the build method of the State. Fields in a Widget subclass are
- // always marked "final".
-
- final String title;
-
- @override
- State<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
- int _counter = 0;
-
- void _incrementCounter() {
- setState(() {
- // This call to setState tells the Flutter framework that something has
- // changed in this State, which causes it to rerun the build method below
- // so that the display can reflect the updated values. If we changed
- // _counter without calling setState(), then the build method would not be
- // called again, and so nothing would appear to happen.
- _counter++;
- });
- }
-
- @override
- Widget build(BuildContext context) {
- // This method is rerun every time setState is called, for instance as done
- // by the _incrementCounter method above.
- //
- // The Flutter framework has been optimized to make rerunning build methods
- // fast, so that you can just rebuild anything that needs updating rather
- // than having to individually change instances of widgets.
- return Scaffold(
- appBar: AppBar(
- // TRY THIS: Try changing the color here to a specific color (to
- // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
- // change color while the other colors stay the same.
- backgroundColor: Theme.of(context).colorScheme.inversePrimary,
- // Here we take the value from the MyHomePage object that was created by
- // the App.build method, and use it to set our appbar title.
- title: Text(widget.title),
- ),
- body: Center(
- // Center is a layout widget. It takes a single child and positions it
- // in the middle of the parent.
- child: Column(
- // Column is also a layout widget. It takes a list of children and
- // arranges them vertically. By default, it sizes itself to fit its
- // children horizontally, and tries to be as tall as its parent.
- //
- // Column has various properties to control how it sizes itself and
- // how it positions its children. Here we use mainAxisAlignment to
- // center the children vertically; the main axis here is the vertical
- // axis because Columns are vertical (the cross axis would be
- // horizontal).
- //
- // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
- // action in the IDE, or press "p" in the console), to see the
- // wireframe for each widget.
- mainAxisAlignment: MainAxisAlignment.center,
- children: <Widget>[
- const Text(
- 'You have pushed the button this many times:',
- ),
- Text(
- '$_counter',
- style: Theme.of(context).textTheme.headlineMedium,
- ),
- ],
- ),
- ),
- floatingActionButton: FloatingActionButton(
- onPressed: _incrementCounter,
- tooltip: 'Increment',
- child: const Icon(Icons.add),
- ), // This trailing comma makes auto-formatting nicer for build methods.
+ return const MaterialApp(
+ debugShowCheckedModeBanner: false,
+ home: Homepage(),
  );
  }
 }

rating_bar_screen/lib/slider_widget.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:another_xlider/another_xlider.dart';
+
+class SliderWidget extends StatelessWidget {
+ final double lowerValue;
+ final Function(double) onDragging;
+ final Function(double) onDragCompleted;
+
+ const SliderWidget({
+ super.key,
+ required this.lowerValue,
+ required this.onDragging,
+ required this.onDragCompleted,
+ });
+
+ @override
+ Widget build(BuildContext context) {
+ return Padding(
+ padding: const EdgeInsets.all(30),
+ child: FlutterSlider(
+ values: [lowerValue],
+ min: 0.0,
+ max: 9.0,
+ trackBar: FlutterSliderTrackBar(
+ inactiveTrackBar: BoxDecoration(color: Colors.grey.shade700),
+ activeTrackBarHeight: 8,
+ activeTrackBar: BoxDecoration(
+ color: const Color(0xFFEF8354),
+ gradient: const LinearGradient(
+ colors: [Colors.purple, Colors.orange],
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ ),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ ),
+ handler: FlutterSliderHandler(
+ child: Material(
+ type: MaterialType.canvas,
+ color: Colors.white,
+ elevation: 3,
+ shape:
+ RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
+ child: Container(
+ padding: const EdgeInsets.all(5),
+ child: const Icon(Icons.arrow_forward_ios, size: 25),
+ ),
+ ),
+ ),
+ handlerAnimation: const FlutterSliderHandlerAnimation(
+ curve: Curves.elasticOut,
+ duration: Duration(milliseconds: 700),
+ scale: 1.4,
+ ),
+ tooltip: FlutterSliderTooltip(disabled: true),
+ onDragging: (handlerIndex, lowerValue, upperValue) =>
+ onDragging(lowerValue),
+ onDragCompleted: (handlerIndex, lowerValue, upperValue) =>
+ onDragCompleted(lowerValue),
+ ),
+ );
+ }
+}

rating_bar_screen/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,6 +5,8 @@
 import FlutterMacOS
 import Foundation
 
+import video_player_avfoundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+ FVPVideoPlayerPlugin.register(with: registry.registrar(forPlugin: "FVPVideoPlayerPlugin"))
 }