commit to branch navigationbar

This commit is contained in:
Leon Astner 2025-08-02 03:04:20 +02:00
parent e8cc39387f
commit 0749836d17
4 changed files with 124 additions and 61 deletions

View file

@ -1,4 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'pages/now_playing_page.dart';
import 'pages/library_page.dart';
import 'pages/settings_page.dart';
void main() { void main() {
runApp(const MyApp()); runApp(const MyApp());
@ -37,16 +40,6 @@ class MyApp extends StatelessWidget {
class MyHomePage extends StatefulWidget { class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title}); const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title; final String title;
@override @override
@ -54,69 +47,67 @@ class MyHomePage extends StatefulWidget {
} }
class _MyHomePageState extends State<MyHomePage> { class _MyHomePageState extends State<MyHomePage> {
int _counter = 0; int _selectedIndex = 0;
void _incrementCounter() { void _onItemTapped(int index) {
setState(() { setState(() {
// This call to setState tells the Flutter framework that something has _selectedIndex = index;
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
}); });
} }
Widget _getSelectedPage() {
switch (_selectedIndex) {
case 0:
return const NowPlayingPage();
case 1:
return const LibraryPage();
case 2:
return const SettingsPage();
default:
return const NowPlayingPage();
}
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
backgroundColor: Theme.of(context).colorScheme.inversePrimary, backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Here we take the value from the MyHomePage object that was created by title: Text(_getPageTitle()),
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
), ),
body: Center( body: _getSelectedPage(),
// Center is a layout widget. It takes a single child and positions it bottomNavigationBar: BottomNavigationBar(
// in the middle of the parent. items: const <BottomNavigationBarItem>[
child: Column( BottomNavigationBarItem(
// Column is also a layout widget. It takes a list of children and icon: Icon(Icons.play_circle_filled),
// arranges them vertically. By default, it sizes itself to fit its label: 'Now Playing',
// children horizontally, and tries to be as tall as its parent. ),
// BottomNavigationBarItem(
// Column has various properties to control how it sizes itself and icon: Icon(Icons.library_music),
// how it positions its children. Here we use mainAxisAlignment to label: 'Library',
// center the children vertically; the main axis here is the vertical ),
// axis because Columns are vertical (the cross axis would be BottomNavigationBarItem(
// horizontal). icon: Icon(Icons.settings),
// label: 'Settings',
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
// action in the IDE, or press "p" in the console), to see the
// wireframe for each widget.
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
), ),
], ],
currentIndex: _selectedIndex,
selectedItemColor: Colors.deepPurple,
onTap: _onItemTapped,
), ),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
); );
} }
String _getPageTitle() {
switch (_selectedIndex) {
case 0:
return 'Now Playing';
case 1:
return 'Library';
case 2:
return 'Settings';
default:
return 'Now Playing';
}
}
} }

View file

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

View file

@ -0,0 +1,24 @@
import 'package:flutter/material.dart';
class NowPlayingPage extends StatelessWidget {
const NowPlayingPage({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.music_note, size: 100, color: Colors.deepPurple),
SizedBox(height: 20),
Text(
'Now Playing',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
Text('No music playing'),
],
),
);
}
}

View file

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