💄 Start working on the UI
- Add bottom NavBar - Add top bar - Start working on the `Mixing` Tab
This commit is contained in:
114
lib/main.dart
Normal file
114
lib/main.dart
Normal file
@ -0,0 +1,114 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gomix_flutter/mixing_tab.dart';
|
||||
import 'package:gomix_flutter/ports_tab.dart';
|
||||
import 'package:gomix_flutter/settings_tab.dart';
|
||||
|
||||
void main() => runApp(const GoMixClient());
|
||||
|
||||
class GoMixClient extends StatelessWidget {
|
||||
const GoMixClient({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
theme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(seedColor: Colors.greenAccent),
|
||||
sliderTheme: const SliderThemeData(
|
||||
showValueIndicator: ShowValueIndicator.always,
|
||||
),
|
||||
),
|
||||
// darkTheme: ThemeData(
|
||||
// useMaterial3: true,
|
||||
// colorScheme: ColorScheme.fromSeed(
|
||||
// seedColor: Colors.greenAccent, brightness: Brightness.dark)),
|
||||
home: const GoMixHome(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class GoMixHome extends StatefulWidget {
|
||||
const GoMixHome({super.key});
|
||||
|
||||
@override
|
||||
State<GoMixHome> createState() => _GoMixHomeState();
|
||||
}
|
||||
|
||||
class _GoMixHomeState extends State<GoMixHome> {
|
||||
int currentPageIndex = 0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final ThemeData theme = Theme.of(context);
|
||||
return Scaffold(
|
||||
bottomNavigationBar: NavigationBar(
|
||||
onDestinationSelected: (int index) {
|
||||
setState(() {
|
||||
currentPageIndex = index;
|
||||
});
|
||||
},
|
||||
selectedIndex: currentPageIndex,
|
||||
indicatorColor: theme.colorScheme.secondaryContainer,
|
||||
destinations: <Widget>[
|
||||
NavigationDestination(
|
||||
icon: Transform.rotate(
|
||||
angle: 90 * pi / 180, child: const Icon(Icons.tune_outlined)),
|
||||
label: 'Mixing',
|
||||
),
|
||||
const NavigationDestination(
|
||||
icon: Icon(Icons.settings_input_component_outlined),
|
||||
label: 'Ports',
|
||||
),
|
||||
const NavigationDestination(
|
||||
icon: Icon(Icons.settings_outlined),
|
||||
label: 'Settings',
|
||||
),
|
||||
],
|
||||
),
|
||||
appBar: AppBar(
|
||||
title: const Text('go-mix Audio Mixer'),
|
||||
centerTitle: true,
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.check_circle_outline),
|
||||
color: theme.colorScheme.inversePrimary,
|
||||
tooltip: 'Connected',
|
||||
onPressed: () {},
|
||||
),
|
||||
actions: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.supervised_user_circle_outlined),
|
||||
tooltip: 'Select Server',
|
||||
onPressed: () {
|
||||
Navigator.push(context, MaterialPageRoute<void>(
|
||||
builder: (BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Next page'),
|
||||
),
|
||||
body: const Center(
|
||||
child: Text(
|
||||
'This is the next page',
|
||||
style: TextStyle(fontSize: 24),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
));
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: <Widget>[
|
||||
const MixingTab(),
|
||||
const PortsTab(),
|
||||
const SettingsTab(),
|
||||
][currentPageIndex],
|
||||
);
|
||||
}
|
||||
}
|
||||
63
lib/mixing_card.dart
Normal file
63
lib/mixing_card.dart
Normal file
@ -0,0 +1,63 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class MixingCard extends StatefulWidget {
|
||||
final String name;
|
||||
const MixingCard({super.key, this.name = "Unknown"});
|
||||
|
||||
@override
|
||||
State<MixingCard> createState() => _MixingCardState();
|
||||
}
|
||||
|
||||
class _MixingCardState extends State<MixingCard> {
|
||||
double _sliderValue = 0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var labelStyle = Theme.of(context)
|
||||
.textTheme
|
||||
.labelLarge
|
||||
?.apply(color: Theme.of(context).colorScheme.primary);
|
||||
return Card(
|
||||
margin: const EdgeInsets.all(0),
|
||||
shadowColor: Colors.transparent,
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 15, right: 15, top: 15),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(child: Text(widget.name, style: labelStyle)),
|
||||
IconButton.filledTonal(
|
||||
isSelected: true,
|
||||
onPressed: () {},
|
||||
icon: const Icon(Icons.mic_off_outlined)),
|
||||
const SizedBox(width: 5),
|
||||
IconButton.outlined(
|
||||
isSelected: false,
|
||||
onPressed: () {},
|
||||
icon: const Icon(Icons.unfold_more))
|
||||
],
|
||||
),
|
||||
),
|
||||
Transform.translate(
|
||||
offset: Offset.fromDirection(0, 0),
|
||||
child: SizedBox(
|
||||
width: MediaQuery.of(context).size.width + 180,
|
||||
child: Slider(
|
||||
value: _sliderValue,
|
||||
secondaryTrackValue: 1,
|
||||
min: 0,
|
||||
max: 4,
|
||||
label: _sliderValue.toStringAsFixed(2),
|
||||
onChanged: (val) {
|
||||
setState(() {
|
||||
_sliderValue = val;
|
||||
});
|
||||
}),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
43
lib/mixing_tab.dart
Normal file
43
lib/mixing_tab.dart
Normal file
@ -0,0 +1,43 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gomix_flutter/mixing_card.dart';
|
||||
|
||||
class MixingTab extends StatefulWidget {
|
||||
const MixingTab({super.key});
|
||||
|
||||
@override
|
||||
State<MixingTab> createState() => _MixingTabState();
|
||||
}
|
||||
|
||||
class _MixingTabState extends State<MixingTab> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
double screenWidth = MediaQuery.of(context).size.width;
|
||||
int cols = screenWidth > 550 ? 2 : 1;
|
||||
int cardHeight = 110;
|
||||
|
||||
return SizedBox.expand(
|
||||
child: SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text("Inputs", style: Theme.of(context).textTheme.titleLarge),
|
||||
const SizedBox(height: 10),
|
||||
GridView.count(
|
||||
shrinkWrap: true,
|
||||
childAspectRatio:
|
||||
(screenWidth - 32 - (10 * (cols - 1))) / cardHeight / cols,
|
||||
crossAxisCount: cols,
|
||||
mainAxisSpacing: 10,
|
||||
crossAxisSpacing: 10,
|
||||
children: List<Widget>.generate(
|
||||
6, (i) => MixingCard(name: "Port ${i.toString()}")),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
35
lib/ports_tab.dart
Normal file
35
lib/ports_tab.dart
Normal file
@ -0,0 +1,35 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class PortsTab extends StatefulWidget {
|
||||
const PortsTab({super.key});
|
||||
|
||||
@override
|
||||
State<PortsTab> createState() => _PortsTabState();
|
||||
}
|
||||
|
||||
class _PortsTabState extends State<PortsTab> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
Card(
|
||||
child: ListTile(
|
||||
leading: Icon(Icons.mic_none),
|
||||
title: Text('Port 1'),
|
||||
subtitle: Text('...'),
|
||||
),
|
||||
),
|
||||
Card(
|
||||
child: ListTile(
|
||||
leading: Icon(Icons.speaker_outlined),
|
||||
title: Text('Port 2'),
|
||||
subtitle: Text('...'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
27
lib/settings_tab.dart
Normal file
27
lib/settings_tab.dart
Normal file
@ -0,0 +1,27 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class SettingsTab extends StatefulWidget {
|
||||
const SettingsTab({super.key});
|
||||
|
||||
@override
|
||||
State<SettingsTab> createState() => _SettingsTabState();
|
||||
}
|
||||
|
||||
class _SettingsTabState extends State<SettingsTab> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final ThemeData theme = Theme.of(context);
|
||||
return Card(
|
||||
shadowColor: Colors.transparent,
|
||||
margin: const EdgeInsets.all(8.0),
|
||||
child: SizedBox.expand(
|
||||
child: Center(
|
||||
child: Text(
|
||||
'Settings',
|
||||
style: theme.textTheme.titleLarge,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user