navigation bar and colours custamized
This commit is contained in:
parent
5c84b2fb59
commit
1ce7aea6b5
6 changed files with 167 additions and 51 deletions
|
@ -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,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
34
CHALLENGE_2/sleepysound/lib/pages/group_page.dart
Normal file
34
CHALLENGE_2/sleepysound/lib/pages/group_page.dart
Normal 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),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -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),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
34
CHALLENGE_2/sleepysound/lib/pages/voting_page.dart
Normal file
34
CHALLENGE_2/sleepysound/lib/pages/voting_page.dart
Normal 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),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue