navigation bar and colours custamized

This commit is contained in:
Leon Astner 2025-08-02 03:42:56 +02:00
parent 5c84b2fb59
commit 1ce7aea6b5
6 changed files with 167 additions and 51 deletions

View file

@ -1,7 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'pages/now_playing_page.dart'; import 'pages/now_playing_page.dart';
import 'pages/library_page.dart'; import 'pages/voting_page.dart';
import 'pages/settings_page.dart'; import 'pages/group_page.dart';
void main() { void main() {
runApp(const MyApp()); runApp(const MyApp());
@ -16,8 +16,23 @@ class MyApp extends StatelessWidget {
return MaterialApp( return MaterialApp(
title: 'SleepySound', title: 'SleepySound',
theme: ThemeData( theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), brightness: Brightness.dark,
colorScheme: ColorScheme.fromSeed(
seedColor: const Color(0xFF6366F1),
brightness: Brightness.dark,
),
scaffoldBackgroundColor: const Color(0xFF121212),
appBarTheme: const AppBarTheme(
backgroundColor: Color(0xFF1E1E1E),
foregroundColor: Colors.white,
),
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
backgroundColor: Color(0xFF1E1E1E),
selectedItemColor: Color(0xFF6366F1),
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,
),
), ),
home: const MyHomePage(title: 'Now Playing'), home: const MyHomePage(title: 'Now Playing'),
); );
@ -46,9 +61,9 @@ class _MyHomePageState extends State<MyHomePage> {
case 0: case 0:
return const NowPlayingPage(); return const NowPlayingPage();
case 1: case 1:
return const LibraryPage(); return const VotingPage();
case 2: case 2:
return const SettingsPage(); return const GroupPage();
default: default:
return const NowPlayingPage(); return const NowPlayingPage();
} }
@ -69,7 +84,7 @@ class _MyHomePageState extends State<MyHomePage> {
label: 'Now Playing', label: 'Now Playing',
), ),
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon(Icons.library_music), icon: Icon(Icons.how_to_vote),
label: 'Voting', label: 'Voting',
), ),
BottomNavigationBarItem( BottomNavigationBarItem(
@ -78,7 +93,10 @@ class _MyHomePageState extends State<MyHomePage> {
), ),
], ],
currentIndex: _selectedIndex, currentIndex: _selectedIndex,
selectedItemColor: Colors.deepPurple, backgroundColor: const Color(0xFF1E1E1E),
selectedItemColor: const Color(0xFF6366F1),
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,
onTap: _onItemTapped, onTap: _onItemTapped,
), ),
); );

View file

@ -0,0 +1,34 @@
import 'package:flutter/material.dart';
class GroupPage extends StatelessWidget {
const GroupPage({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFF121212),
child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.group, size: 100, color: Color(0xFF6366F1)),
SizedBox(height: 20),
Text(
'Group',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 10),
Text(
'Manage your listening group',
style: TextStyle(color: Colors.grey),
),
],
),
),
);
}
}

View file

@ -1,23 +1,33 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class LibraryPage extends StatelessWidget { class VotingPage extends StatelessWidget {
const LibraryPage({super.key}); const VotingPage({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return const Center( return Container(
child: Column( color: const Color(0xFF121212),
mainAxisAlignment: MainAxisAlignment.center, child: const Center(
children: [ child: Column(
Icon(Icons.library_music, size: 100, color: Colors.deepPurple), mainAxisAlignment: MainAxisAlignment.center,
SizedBox(height: 20), children: [
Text( Icon(Icons.how_to_vote, size: 100, color: Color(0xFF6366F1)),
'Library', SizedBox(height: 20),
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), Text(
), 'Voting',
SizedBox(height: 10), style: TextStyle(
Text('Your music library'), fontSize: 24,
], fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 10),
Text(
'Vote for the next song',
style: TextStyle(color: Colors.grey),
),
],
),
), ),
); );
} }

View file

@ -5,19 +5,29 @@ class NowPlayingPage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return const Center( return Container(
child: Column( color: const Color(0xFF121212),
mainAxisAlignment: MainAxisAlignment.center, child: const Center(
children: [ child: Column(
Icon(Icons.music_note, size: 100, color: Colors.deepPurple), mainAxisAlignment: MainAxisAlignment.center,
SizedBox(height: 20), children: [
Text( Icon(Icons.music_note, size: 100, color: Color(0xFF6366F1)),
'Now Playing', SizedBox(height: 20),
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), Text(
), 'Now Playing',
SizedBox(height: 10), style: TextStyle(
Text('No music playing'), fontSize: 24,
], fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 10),
Text(
'No music playing',
style: TextStyle(color: Colors.grey),
),
],
),
), ),
); );
} }

View file

@ -1,23 +1,33 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class SettingsPage extends StatelessWidget { class GroupPage extends StatelessWidget {
const SettingsPage({super.key}); const GroupPage({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return const Center( return Container(
child: Column( color: const Color(0xFF121212),
mainAxisAlignment: MainAxisAlignment.center, child: const Center(
children: [ child: Column(
Icon(Icons.settings, size: 100, color: Colors.deepPurple), mainAxisAlignment: MainAxisAlignment.center,
SizedBox(height: 20), children: [
Text( Icon(Icons.group, size: 100, color: Color(0xFF6366F1)),
'Settings', SizedBox(height: 20),
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), Text(
), 'Group',
SizedBox(height: 10), style: TextStyle(
Text('App settings'), fontSize: 24,
], fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 10),
Text(
'Manage your listening group',
style: TextStyle(color: Colors.grey),
),
],
),
), ),
); );
} }

View file

@ -0,0 +1,34 @@
import 'package:flutter/material.dart';
class VotingPage extends StatelessWidget {
const VotingPage({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFF121212),
child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.how_to_vote, size: 100, color: Color(0xFF6366F1)),
SizedBox(height: 20),
Text(
'Voting',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 10),
Text(
'Vote for the next song',
style: TextStyle(color: Colors.grey),
),
],
),
),
);
}
}