How to make one widget persistent through different tabs?

Viewed 78

So what i'm trying to do is keep the last row with its state within all 3 tabs i have but i'm not sure how i'd do that , any help ?

i want to basically keep slider and duration and so on within all tabs i have if that makes sense , now it only works on the first tab as expected

Also there's probably a better way using provider than moving all 7 inputs to the songcard so if you can help with that as well it'd be great

    import 'package:flutter/material.dart';
    import 'package:audioplayers/audioplayers.dart';
    import 'package:music_playerrrrr/providers/songs.dart';
    import 'package:music_playerrrrr/screens/tracks_screen.dart';
    import 'package:provider/provider.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return ChangeNotifierProvider(
          create: (context) => Songs(),
          child: DefaultTabController(
            length: 3,
            child: MaterialApp(
              home: Scaffold(
                appBar: AppBar(
                  title: Text('Music Player'),
                  bottom: TabBar(
                    tabs: [
                      Tab(
                        text: 'Tracks',
                      ),
                      Tab(
                        text: 'Albums',
                      ),
                      Tab(
                        text: 'lol',
                      ),
                    ],
                  ),
                ),
                body: TabBarView(
                  children: [
                    TracksScreen(),
                    Scaffold(),
                    Scaffold(),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(0),
              child: ListView.builder(
                itemCount: Provider.of<Songs>(context).songsList.length,
                itemBuilder: (context, i) {
                  final song = Provider.of<Songs>(context).songsList[i];
                  final durationInMs =
                      Provider.of<Songs>(context).songsList[i].duration;
                  final duration = millisecondsToMinutes(durationInMs);
                  final songId = song.id;
                  final filePath = song.filePath;
                  return SongCard(
                    song.title,
                    song.artist,
                    duration,
                    songId,
                    filePath,
                    checkIfSongClicked,
                    player,
                  );
                },
              ),
            ),
          ),
          if (isSongClickedOrNot)
            Container(
              width: MediaQuery.of(context).size.width,
              height: 70,
              color: Colors.pink,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(
                    width: 10,
                  ),
                  Text(
                      _position.inSeconds.remainder(60) < 10
                          ? '${_position.inMinutes.toString()}:0${_position.inSeconds.remainder(60).toString()}'
                          : '${_position.inMinutes.toString()}:${_position.inSeconds.remainder(60).toString()}',
                      style: TextStyle(color: Colors.white, fontSize: 20)),
                  Expanded(
                    child: Slider(
                      min: 0,
                      max: _duration.inSeconds.toDouble(),
                      value: _position.inSeconds.toDouble(),
                      onChanged: (value) {
                        setState(() {
                          seekToSecond(value.toInt());
                        });
                      },
                    ),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  IconButton(
                    iconSize: 50.0,
                    icon: isPlayingOrNot
                        ? Icon(Icons.pause)
                        : Icon(Icons.play_arrow),
                    onPressed: () {
                      if (isPlayingOrNot) {
                        player.pause();
                        setState(() {
                          isPlayingOrNot = false;
                        });
                      } else {
                        player.resume();
                        setState(() {
                          isPlayingOrNot = true;
                        });
                      }
                    },
                  )
                ],
              ),
            ),
        ],
      ),
    );
  }
}
0 Answers
Related