Skip to content

Commit f42b1a3

Browse files
ChunhThanhDeChunhThanhDe
committed
🔨 Create Rating Bar - ChunhThanhDe
1 parent c779036 commit f42b1a3

File tree

6 files changed

+280
-112
lines changed

6 files changed

+280
-112
lines changed

‎rating_bar_screen/lib/homepage.dart‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:rating_bar_screen/slider_widget.dart';
3+
import 'package:video_player/video_player.dart';
4+
5+
class Homepage extends StatefulWidget {
6+
const Homepage({super.key});
7+
8+
@override
9+
State<Homepage> createState() => _HomepageState();
10+
}
11+
12+
class _HomepageState extends State<Homepage> {
13+
double _lowerValue = 9.0;
14+
VideoPlayerController? _controller;
15+
String emotion = "I love it so much!!!!!";
16+
17+
@override
18+
void initState() {
19+
super.initState();
20+
_updateVideo(_getVideoPath(_lowerValue));
21+
}
22+
23+
void _updateVideo(String path) {
24+
_controller?.dispose(); // Dispose old controller
25+
_controller = VideoPlayerController.asset(path)
26+
..initialize().then((_) {
27+
setState(() {});
28+
_controller
29+
?..setLooping(true)
30+
..play();
31+
});
32+
}
33+
34+
@override
35+
Widget build(BuildContext context) {
36+
return Scaffold(
37+
backgroundColor: Colors.black,
38+
body: Center(
39+
child: Column(
40+
mainAxisAlignment: MainAxisAlignment.center,
41+
children: [
42+
const Text(
43+
"How's your day",
44+
style: TextStyle(
45+
fontSize: 32,
46+
color: Color(0xFF69708D),
47+
fontWeight: FontWeight.w700),
48+
),
49+
const SizedBox(height: 20),
50+
_buildVideoPlayer(),
51+
const SizedBox(height: 20),
52+
Text(
53+
emotion,
54+
style: const TextStyle(
55+
fontSize: 32,
56+
color: Color(0xFF69708D),
57+
fontWeight: FontWeight.w700),
58+
),
59+
SliderWidget(
60+
lowerValue: _lowerValue,
61+
onDragging: (value) {
62+
setState(() {
63+
_lowerValue = value;
64+
emotion = _getEmotion(value);
65+
});
66+
},
67+
onDragCompleted: (value) {
68+
setState(() {
69+
_lowerValue = value;
70+
_updateVideo(_getVideoPath(value));
71+
});
72+
},
73+
),
74+
],
75+
),
76+
),
77+
);
78+
}
79+
80+
Widget _buildVideoPlayer() {
81+
if (_controller != null && _controller!.value.isInitialized) {
82+
return AspectRatio(
83+
aspectRatio: _controller!.value.aspectRatio,
84+
child: VideoPlayer(_controller!),
85+
);
86+
} else {
87+
return SizedBox(height: MediaQuery.of(context).size.width);
88+
}
89+
}
90+
91+
@override
92+
void dispose() {
93+
_controller?.dispose();
94+
super.dispose();
95+
}
96+
97+
String _getEmotion(double value) {
98+
if (value >= 8.0) return "I love it so much !!!!!";
99+
if (value >= 7.0) return "I'm really love it!";
100+
if (value >= 6.0) return "It's awesome.";
101+
if (value >= 5.0) return "It wow.";
102+
if (value >= 4.0) return "I am okay..";
103+
if (value >= 3.0) return "It's not that good.";
104+
if (value >= 2.0) return "Very bad!";
105+
if (value >= 1.0) return "That's horrible.";
106+
return "Angry so much !!?!";
107+
}
108+
109+
String _getVideoPath(double value) {
110+
if (value >= 8.0) return "assets/8-celebrate.webm";
111+
if (value >= 7.0) return "assets/7-loveit.webm";
112+
if (value >= 6.0) return "assets/5-awesome.webm";
113+
if (value >= 5.0) return "assets/6-wow.webm";
114+
if (value >= 4.0) return "assets/4-okay.webm";
115+
if (value >= 3.0) return "assets/3-notgood.webm";
116+
if (value >= 2.0) return "assets/2-verybad.webm";
117+
if (value >= 1.0) return "assets/1-terrible.webm";
118+
return "assets/0-angry.webm";
119+
}
120+
}

‎rating_bar_screen/lib/main.dart‎

Lines changed: 4 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:rating_bar_screen/homepage.dart';
23

34
void main() {
45
runApp(const MyApp());
@@ -7,119 +8,11 @@ void main() {
78
class MyApp extends StatelessWidget {
89
const MyApp({super.key});
910

10-
// This widget is the root of your application.
1111
@override
1212
Widget build(BuildContext context) {
13-
return MaterialApp(
14-
title: 'Flutter Demo',
15-
theme: ThemeData(
16-
// This is the theme of your application.
17-
//
18-
// TRY THIS: Try running your application with "flutter run". You'll see
19-
// the application has a purple toolbar. Then, without quitting the app,
20-
// try changing the seedColor in the colorScheme below to Colors.green
21-
// and then invoke "hot reload" (save your changes or press the "hot
22-
// reload" button in a Flutter-supported IDE, or press "r" if you used
23-
// the command line to start the app).
24-
//
25-
// Notice that the counter didn't reset back to zero; the application
26-
// state is not lost during the reload. To reset the state, use hot
27-
// restart instead.
28-
//
29-
// This works for code too, not just values: Most code changes can be
30-
// tested with just a hot reload.
31-
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
32-
useMaterial3: true,
33-
),
34-
home: const MyHomePage(title: 'Flutter Demo Home Page'),
35-
);
36-
}
37-
}
38-
39-
class MyHomePage extends StatefulWidget {
40-
const MyHomePage({super.key, required this.title});
41-
42-
// This widget is the home page of your application. It is stateful, meaning
43-
// that it has a State object (defined below) that contains fields that affect
44-
// how it looks.
45-
46-
// This class is the configuration for the state. It holds the values (in this
47-
// case the title) provided by the parent (in this case the App widget) and
48-
// used by the build method of the State. Fields in a Widget subclass are
49-
// always marked "final".
50-
51-
final String title;
52-
53-
@override
54-
State<MyHomePage> createState() => _MyHomePageState();
55-
}
56-
57-
class _MyHomePageState extends State<MyHomePage> {
58-
int _counter = 0;
59-
60-
void _incrementCounter() {
61-
setState(() {
62-
// This call to setState tells the Flutter framework that something has
63-
// changed in this State, which causes it to rerun the build method below
64-
// so that the display can reflect the updated values. If we changed
65-
// _counter without calling setState(), then the build method would not be
66-
// called again, and so nothing would appear to happen.
67-
_counter++;
68-
});
69-
}
70-
71-
@override
72-
Widget build(BuildContext context) {
73-
// This method is rerun every time setState is called, for instance as done
74-
// by the _incrementCounter method above.
75-
//
76-
// The Flutter framework has been optimized to make rerunning build methods
77-
// fast, so that you can just rebuild anything that needs updating rather
78-
// than having to individually change instances of widgets.
79-
return Scaffold(
80-
appBar: AppBar(
81-
// TRY THIS: Try changing the color here to a specific color (to
82-
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
83-
// change color while the other colors stay the same.
84-
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
85-
// Here we take the value from the MyHomePage object that was created by
86-
// the App.build method, and use it to set our appbar title.
87-
title: Text(widget.title),
88-
),
89-
body: Center(
90-
// Center is a layout widget. It takes a single child and positions it
91-
// in the middle of the parent.
92-
child: Column(
93-
// Column is also a layout widget. It takes a list of children and
94-
// arranges them vertically. By default, it sizes itself to fit its
95-
// children horizontally, and tries to be as tall as its parent.
96-
//
97-
// Column has various properties to control how it sizes itself and
98-
// how it positions its children. Here we use mainAxisAlignment to
99-
// center the children vertically; the main axis here is the vertical
100-
// axis because Columns are vertical (the cross axis would be
101-
// horizontal).
102-
//
103-
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
104-
// action in the IDE, or press "p" in the console), to see the
105-
// wireframe for each widget.
106-
mainAxisAlignment: MainAxisAlignment.center,
107-
children: <Widget>[
108-
const Text(
109-
'You have pushed the button this many times:',
110-
),
111-
Text(
112-
'$_counter',
113-
style: Theme.of(context).textTheme.headlineMedium,
114-
),
115-
],
116-
),
117-
),
118-
floatingActionButton: FloatingActionButton(
119-
onPressed: _incrementCounter,
120-
tooltip: 'Increment',
121-
child: const Icon(Icons.add),
122-
), // This trailing comma makes auto-formatting nicer for build methods.
13+
return const MaterialApp(
14+
debugShowCheckedModeBanner: false,
15+
home: Homepage(),
12316
);
12417
}
12518
}

‎rating_bar_screen/lib/slider_widget.dart‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:another_xlider/another_xlider.dart';
3+
4+
class SliderWidget extends StatelessWidget {
5+
final double lowerValue;
6+
final Function(double) onDragging;
7+
final Function(double) onDragCompleted;
8+
9+
const SliderWidget({
10+
super.key,
11+
required this.lowerValue,
12+
required this.onDragging,
13+
required this.onDragCompleted,
14+
});
15+
16+
@override
17+
Widget build(BuildContext context) {
18+
return Padding(
19+
padding: const EdgeInsets.all(30),
20+
child: FlutterSlider(
21+
values: [lowerValue],
22+
min: 0.0,
23+
max: 9.0,
24+
trackBar: FlutterSliderTrackBar(
25+
inactiveTrackBar: BoxDecoration(color: Colors.grey.shade700),
26+
activeTrackBarHeight: 8,
27+
activeTrackBar: BoxDecoration(
28+
color: const Color(0xFFEF8354),
29+
gradient: const LinearGradient(
30+
colors: [Colors.purple, Colors.orange],
31+
begin: Alignment.topLeft,
32+
end: Alignment.bottomRight,
33+
),
34+
borderRadius: BorderRadius.circular(12),
35+
),
36+
),
37+
handler: FlutterSliderHandler(
38+
child: Material(
39+
type: MaterialType.canvas,
40+
color: Colors.white,
41+
elevation: 3,
42+
shape:
43+
RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
44+
child: Container(
45+
padding: const EdgeInsets.all(5),
46+
child: const Icon(Icons.arrow_forward_ios, size: 25),
47+
),
48+
),
49+
),
50+
handlerAnimation: const FlutterSliderHandlerAnimation(
51+
curve: Curves.elasticOut,
52+
duration: Duration(milliseconds: 700),
53+
scale: 1.4,
54+
),
55+
tooltip: FlutterSliderTooltip(disabled: true),
56+
onDragging: (handlerIndex, lowerValue, upperValue) =>
57+
onDragging(lowerValue),
58+
onDragCompleted: (handlerIndex, lowerValue, upperValue) =>
59+
onDragCompleted(lowerValue),
60+
),
61+
);
62+
}
63+
}

‎rating_bar_screen/macos/Flutter/GeneratedPluginRegistrant.swift‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
import FlutterMacOS
66
import Foundation
77

8+
import video_player_avfoundation
89

910
func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
11+
FVPVideoPlayerPlugin.register(with: registry.registrar(forPlugin: "FVPVideoPlayerPlugin"))
1012
}

0 commit comments

Comments
 (0)