so… im on a streamin app project. and i have been made my videoplayer that was looked like this

VideoPlayer Image

now i need an forward and backward button that between the play button. so that just like youtube mobile accessibility function

i have try searching on the documentation and also using an AI to make it work. but it not on the floating action.

here is my code

class WatchScreen extends StatefulWidget {
  final String videoUrl;
  final String title;
  final int episodeNumber;
  final List<Map<String, dynamic>> episodes; // Daftar episode

  const WatchScreen({
    required this.videoUrl,
    required this.title,
    required this.episodeNumber,
    required this.episodes,
    Key? key,
  }) : super(key: key);

  @override
  State<WatchScreen> createState() => _WatchScreenState();
}

class _WatchScreenState extends State<WatchScreen> {
  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;

  @override
  void initState() {
    super.initState();
    _initializePlayer();
  }

  Future<void> _initializePlayer() async {
    _videoPlayerController = VideoPlayerController.network(widget.videoUrl);
    await _videoPlayerController.initialize();

    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true,
      looping: false,
    );

    setState(() {});
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.grey[900],
      ),
      body: Column(
        children: [
          // Video Player with Fixed Height
          Container(
            padding: EdgeInsets.all(0.0),
            child: AspectRatio(
              aspectRatio: 16 / 9,
              child: _chewieController != null &&
                      _chewieController!
                          .videoPlayerController.value.isInitialized
                  ? Chewie(controller: _chewieController!)
                  : Center(child: CircularProgressIndicator()),
            ),
          ),

          // Episode Title and Info
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "Episode ${widget.episodeNumber}: ${widget.title}",
              style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.white),
            ),
          ),

          // Features Buttons
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  // Add download feature here
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text("Download feature coming soon!")),
                  );
                },
                icon: Icon(Icons.download),
                label: Text("Download"),
              ),
              ElevatedButton.icon(
                onPressed: () {
                  // Add add-to-favorites feature here
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text("Added to Favorites!")),
                  );
                },
                icon: Icon(Icons.favorite_border),
                label: Text("Favorite"),
              ),
              ElevatedButton.icon(
                onPressed: () {
                  // Ganti dengan aksi untuk membuka komentar
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                        content: Text("Fitur Komentar sedang dikembangkan!")),
                  );
                },
                icon: Icon(Icons.comment), // Ganti ikon menjadi komentar
                label: Text("Komentar"), // Ganti teks tombol menjadi "Komentar"
              ),
            ],
          ),

          // Divider for Episodes List
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Divider(color: Colors.white70),
          ),

          // Episodes List
          Expanded(
            child: ListView.builder(
              itemCount: widget.episodes.length,
              itemBuilder: (context, index) {
                final episode = widget.episodes[index];
                return Card(
                  color: Colors.blueGrey[800],
                  margin: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
                  child: ListTile(
                    leading: Image.network(
                      episode['thumbnail'], // Thumbnail per episode
                      width: 50,
                      height: 75,
                      fit: BoxFit.cover,
                    ),
                    title: Text(
                      "Episode ${episode['episodeNumber']}: ${episode['title']}",
                      style: TextStyle(color: Colors.white),
                    ),
                    onTap: () {
                      Navigator.pushReplacement(
                        context,
                        MaterialPageRoute(
                          builder: (context) => WatchScreen(
                            videoUrl: episode['videoUrl'],
                            title: episode['title'],
                            episodeNumber: episode['episodeNumber'],
                            episodes: widget.episodes,
                          ),
                        ),
                      );
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Please help me

i appreciate someone help me