Skip to content

Commit c5a73c9

Browse files
KamooolKamoool
committed
A bit of UI changes + refactoring
1 parent 9e11781 commit c5a73c9

9 files changed

Lines changed: 367 additions & 368 deletions

‎lib/main.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ void main() {
77
WidgetsFlutterBinding.ensureInitialized();
88
if (Platform.isWindows || Platform.isLinux || Platform.isMacOS) {
99
setWindowTitle('Quick - Down - Shifter APP');
10+
setWindowFrame(const Rect.fromLTWH(100, 100, 1200, 730));
1011
setWindowMinSize(const Size(100, 100));
12+
1113
// setWindowMaxSize(const Size(1200, 730));
1214
}
1315

‎lib/screens/port_screen.dart‎

Lines changed: 168 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ class PortScreen extends StatefulWidget {
1515

1616
class _PortScreenState extends State<PortScreen>
1717
with SingleTickerProviderStateMixin {
18+
final ScrollController scrollControllerHorizontal = ScrollController();
1819
String? dropdownValue;
1920
List<String> availablePorts = [];
2021
late AnimationController animationController;
@@ -46,173 +47,186 @@ class _PortScreenState extends State<PortScreen>
4647
@override
4748
Widget build(BuildContext context) {
4849
return Scaffold(
49-
body: Container(
50-
decoration: const BoxDecoration(
51-
gradient: LinearGradient(
52-
colors: [
53-
Color(0xFF676767),
54-
Color(0xFF676767),
55-
Color(0xFFA05A5A),
56-
Color(0xFF676767),
57-
Color(0xFF676767)
58-
],
59-
begin: FractionalOffset(0, 0),
60-
end: FractionalOffset(1, 1),
61-
stops: [0, 0.25, 0.5, 0.75, 1],
62-
tileMode: TileMode.clamp),
63-
),
64-
child: Center(
65-
child: Row(
66-
mainAxisAlignment: MainAxisAlignment.center,
67-
children: [
68-
Padding(
69-
padding: const EdgeInsets.fromLTRB(0, 0, 3, 0),
70-
child: AnimatedIconButton(
71-
animationController: animationController,
72-
size: 35,
73-
initialIcon: 0,
74-
onPressed: () {
75-
initPorts();
76-
animationController.reverse();
77-
refreshPressed = true;
78-
revertRefresh();
79-
},
80-
splashColor: Colors.blueAccent,
81-
icons: const <AnimatedIconItem>[
82-
AnimatedIconItem(
83-
icon: Icon(Icons.refresh, color: Colors.black),
84-
),
85-
AnimatedIconItem(
86-
icon: Icon(Icons.task_alt, color: Colors.green),
87-
),
50+
body: Scrollbar(
51+
controller: scrollControllerHorizontal,
52+
scrollbarOrientation: ScrollbarOrientation.bottom,
53+
thumbVisibility: true,
54+
trackVisibility: true,
55+
child: SingleChildScrollView(
56+
controller: scrollControllerHorizontal,
57+
scrollDirection: Axis.horizontal,
58+
child: Container(
59+
width: MediaQuery.of(context).size.width > 540? MediaQuery.of(context).size.width : 540,
60+
decoration: const BoxDecoration(
61+
gradient: LinearGradient(
62+
colors: [
63+
Color(0xFF676767),
64+
Color(0xFF676767),
65+
Color(0xFFA05A5A),
66+
Color(0xFF676767),
67+
Color(0xFF676767)
8868
],
89-
),
90-
),
91-
DropdownButtonHideUnderline(
92-
child: DropdownButton2(
93-
isExpanded: true,
94-
hint: Row(
95-
children: const [
96-
Expanded(
97-
child: Padding(
98-
padding: EdgeInsets.fromLTRB(5, 0, 5, 3),
99-
child: Text(
100-
'Select Port',
101-
style: TextStyle(
102-
fontSize: 20,
103-
// fontWeight: FontWeight.bold,
104-
color: Colors.black,
69+
begin: FractionalOffset(0, 0),
70+
end: FractionalOffset(1, 1),
71+
stops: [0, 0.25, 0.5, 0.75, 1],
72+
tileMode: TileMode.clamp),
73+
),
74+
child: Center(
75+
child: Row(
76+
mainAxisAlignment: MainAxisAlignment.center,
77+
children: [
78+
Padding(
79+
padding: const EdgeInsets.fromLTRB(0, 0, 3, 0),
80+
child: AnimatedIconButton(
81+
animationController: animationController,
82+
size: 35,
83+
initialIcon: 0,
84+
onPressed: () {
85+
initPorts();
86+
animationController.reverse();
87+
refreshPressed = true;
88+
revertRefresh();
89+
},
90+
splashColor: Colors.blueAccent,
91+
icons: const <AnimatedIconItem>[
92+
AnimatedIconItem(
93+
icon: Icon(Icons.refresh, color: Colors.black),
10594
),
106-
overflow: TextOverflow.ellipsis,
107-
),
95+
AnimatedIconItem(
96+
icon: Icon(Icons.task_alt, color: Colors.green),
97+
),
98+
],
10899
),
109100
),
110-
],
111-
),
112-
items: availablePorts
113-
.map((item) => DropdownMenuItem<String>(
114-
value: item,
115-
child: Text(
116-
item,
117-
style: const TextStyle(
118-
fontSize: 20,
119-
color: Colors.black,
101+
DropdownButtonHideUnderline(
102+
child: DropdownButton2(
103+
isExpanded: true,
104+
hint: Row(
105+
children: const [
106+
Expanded(
107+
child: Padding(
108+
padding: EdgeInsets.fromLTRB(5, 0, 5, 3),
109+
child: Text(
110+
'Select Port',
111+
style: TextStyle(
112+
fontSize: 20,
113+
// fontWeight: FontWeight.bold,
114+
color: Colors.black,
115+
),
116+
overflow: TextOverflow.ellipsis,
117+
),
118+
),
119+
),
120+
],
121+
),
122+
items: availablePorts
123+
.map((item) => DropdownMenuItem<String>(
124+
value: item,
125+
child: Text(
126+
item,
127+
style: const TextStyle(
128+
fontSize: 20,
129+
color: Colors.black,
130+
),
131+
overflow: TextOverflow.ellipsis,
132+
),
133+
))
134+
.toList(),
135+
value: dropdownValue,
136+
onChanged: (String? value) {
137+
setState(() {
138+
dropdownValue = value ?? '';
139+
});
140+
},
141+
icon: const Icon(
142+
Icons.arrow_forward_ios_outlined,
143+
),
144+
iconSize: 20,
145+
iconEnabledColor: Colors.black,
146+
iconDisabledColor: Colors.black,
147+
buttonHeight: 45,
148+
buttonWidth: 300,
149+
buttonPadding: const EdgeInsets.only(left: 30, right: 30),
150+
buttonDecoration: BoxDecoration(
151+
boxShadow: const [
152+
BoxShadow(
153+
color: Colors.black26,
154+
spreadRadius: 0.8,
155+
blurRadius: 2,
156+
offset: Offset(0, 2),
120157
),
121-
overflow: TextOverflow.ellipsis,
158+
],
159+
borderRadius: BorderRadius.circular(20),
160+
border: Border.all(
161+
width: 2,
162+
color: Colors.transparent,
122163
),
123-
))
124-
.toList(),
125-
value: dropdownValue,
126-
onChanged: (String? value) {
127-
setState(() {
128-
dropdownValue = value ?? '';
129-
});
130-
},
131-
icon: const Icon(
132-
Icons.arrow_forward_ios_outlined,
133-
),
134-
iconSize: 20,
135-
iconEnabledColor: Colors.black,
136-
iconDisabledColor: Colors.black,
137-
buttonHeight: 45,
138-
buttonWidth: 300,
139-
buttonPadding: const EdgeInsets.only(left: 30, right: 30),
140-
buttonDecoration: BoxDecoration(
141-
boxShadow: const [
142-
BoxShadow(
143-
color: Colors.black26,
144-
spreadRadius: 0.8,
145-
blurRadius: 2,
146-
offset: Offset(0, 2),
164+
color: Colors.grey.shade200,
165+
),
166+
buttonElevation: 10,
167+
itemHeight: 40,
168+
itemPadding: const EdgeInsets.only(left: 30, right: 30),
169+
dropdownMaxHeight: 200,
170+
dropdownWidth: 300,
171+
dropdownPadding: null,
172+
dropdownDecoration: BoxDecoration(
173+
borderRadius: BorderRadius.circular(20),
174+
color: Colors.grey.shade50,
175+
),
176+
dropdownElevation: 8,
177+
scrollbarRadius: const Radius.circular(40),
178+
scrollbarThickness: 6,
179+
scrollbarAlwaysShow: true,
180+
offset: const Offset(0, 0),
181+
),
147182
),
148-
],
149-
borderRadius: BorderRadius.circular(20),
150-
border: Border.all(
151-
width: 2,
152-
color: Colors.transparent,
153-
),
154-
color: Colors.grey.shade200,
155-
),
156-
buttonElevation: 10,
157-
itemHeight: 40,
158-
itemPadding: const EdgeInsets.only(left: 30, right: 30),
159-
dropdownMaxHeight: 200,
160-
dropdownWidth: 300,
161-
dropdownPadding: null,
162-
dropdownDecoration: BoxDecoration(
163-
borderRadius: BorderRadius.circular(20),
164-
color: Colors.grey.shade50,
165-
),
166-
dropdownElevation: 8,
167-
scrollbarRadius: const Radius.circular(40),
168-
scrollbarThickness: 6,
169-
scrollbarAlwaysShow: true,
170-
offset: const Offset(0, 0),
171-
),
172-
),
173-
Padding(
174-
padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
175-
child: TapDebouncer(
176-
cooldown: const Duration(milliseconds: 1000),
177-
onTap: () async => await establishConnection(),
178-
builder: (BuildContext context, TapDebouncerFunc? onTap) {
179-
return ElevatedButton(
180-
onPressed: onTap,
181-
style: ElevatedButton.styleFrom(
182-
minimumSize: const Size(150, 55),
183-
primary: Colors.grey.shade200,
184-
onPrimary: Colors.black12,
185-
onSurface: Colors.green,
186-
shadowColor: Colors.black,
187-
elevation: 3,
188-
side: const BorderSide(
189-
color: Colors.transparent,
190-
width: 2,
191-
style: BorderStyle.solid),
192-
shape: RoundedRectangleBorder(
193-
borderRadius: BorderRadius.circular(20),
183+
Padding(
184+
padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
185+
child: TapDebouncer(
186+
cooldown: const Duration(milliseconds: 1000),
187+
onTap: () async => await establishConnection(),
188+
builder: (BuildContext context, TapDebouncerFunc? onTap) {
189+
return ElevatedButton(
190+
onPressed: onTap,
191+
style: ElevatedButton.styleFrom(
192+
minimumSize: const Size(150, 55),
193+
primary: Colors.grey.shade200,
194+
onPrimary: Colors.black12,
195+
onSurface: Colors.green,
196+
shadowColor: Colors.black,
197+
elevation: 3,
198+
side: const BorderSide(
199+
color: Colors.transparent,
200+
width: 2,
201+
style: BorderStyle.solid),
202+
shape: RoundedRectangleBorder(
203+
borderRadius: BorderRadius.circular(20),
204+
),
205+
tapTargetSize: MaterialTapTargetSize.padded,
206+
),
207+
child: onTap == null
208+
? const Text(
209+
'Wait',
210+
style:
211+
TextStyle(color: Colors.black, fontSize: 20),
212+
)
213+
: const Text(
214+
'Connect',
215+
style:
216+
TextStyle(color: Colors.black, fontSize: 20),
217+
),
218+
);
219+
},
194220
),
195-
tapTargetSize: MaterialTapTargetSize.padded,
196221
),
197-
child: onTap == null
198-
? const Text(
199-
'Wait',
200-
style:
201-
TextStyle(color: Colors.black, fontSize: 20),
202-
)
203-
: const Text(
204-
'Connect',
205-
style:
206-
TextStyle(color: Colors.black, fontSize: 20),
207-
),
208-
);
209-
},
222+
],
223+
),
210224
),
211225
),
212-
],
213-
),
214226
),
215227
),
228+
// ),
229+
// ),
216230
);
217231
}
218232

0 commit comments

Comments
 (0)