How do you extend a slider to the full width of the phone?

[DanK]

I am trying to extend the slider to the full width of app, but I can’t figure out how. I tried wrapping the slider in an Expanded widget, but it didn’t work. What would you recommend I do?
Here is the screenshot of the app:

Here is the code for the app:

import 'package:blend/components/my_drawer.dart';
import 'package:blend/models/playlist_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.surface,
      appBar: AppBar(
        // automaticallyImplyLeading: false,
        leading: Builder(
          builder: (context) {
            return Padding(
              padding: const EdgeInsets.only(left: 20.0),
              child: IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () {
                  Scaffold.of(context).openDrawer();
                },
              ),
            );
          },
        ),
      ),
      drawer: const MyDrawer(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 30.0, top: 20),
            child: Text("Recommended For You", style: TextStyle(fontSize: 25)),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 30.0),
            child: Consumer<PlaylistProvider>(
              builder: (context, value, child) {
                // final List<_> playlist = value.playlist;
                return SizedBox(
                  height: 200,
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    // itemCount: playlist.length,
                    itemCount: 2,
                    itemBuilder: (context, index) {
                      return Text("Test");
                    },
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 30.0, top: 20),
            child: Text("My Playlist", style: TextStyle(fontSize: 25)),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 30.0),
            child: Consumer<PlaylistProvider>(
              builder: (context, value, child) {
                // final List<_> playlist = value.playlist;
                return SizedBox(
                  height: 200,
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    // itemCount: playlist.length,
                    itemCount: 2,
                    itemBuilder: (context, index) {
                      return Text("Test");
                    },
                  ),
                );
              },
            ),
          ),
          Expanded(child: Container()),
          Padding(
            padding: const EdgeInsets.only(bottom: 25.0),
            child: Column(
              children: [
                Slider(
                  divisions: 100,
                  min: 0,
                  max: 100,
                  value: 100,
                  // max: value.totalDuration.inSeconds.toDouble(),
                  // value: value.currentDuration.inSeconds.toDouble(),
                  activeColor: Colors.white,
                  onChanged: (double double) {},
                  // onChangeEnd: (double double) {
                  //   value.seek(Duration(seconds: double.toInt()));
                  // },
                ),
                Row(
                  children: [
                    Image.asset(
                      "assets/images/jazz.jpg",
                      height: 75,
                      width: 100,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Song", style: TextStyle(fontSize: 24.0)),
                          Text("Artist", style: TextStyle(fontSize: 16.0)),
                        ],
                      ),
                    ),
                    Expanded(child: Container()),
                    Padding(
                      padding: const EdgeInsets.only(right: 20.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Icon(Icons.skip_previous, size: 30),
                          Icon(Icons.pause, size: 30),
                          Icon(Icons.skip_next, size: 30),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

[mihalycsaba]

try this padding property - Slider class - material library - Dart API

[evaluator118]

Isn’t the slider already taking the whole screen (minus the padding)? O.o

Anyway,

On Column, crossAxisAlignment should be CrossAxisAlignment.stretch (this will make the column take the entire horizontal space).

Notice that some elements have internal annoying padding (IconButton, for instance). Maybe the slider has this as well (it needs this space to draw the touch handling and feedback).

And I wouldn’t put a ListView inside a Column. ListView is meant to be used when you have a lot of items (so it only renders the items you are currently seeing). For those cases, a nested Column would do the trick. Especially if you decide after that the first column will be a child of a SingleChildScrollView (ListView inside Scrollable = Kaboom).

Also, not a good idea to use fixed sizes (those SizedBox with height: 200). You can have different child sizes and even different visual density depending on the platform.

Expanded(child: Container()), if you meant a widget that fills the remaining space, just use const Spacer(). It works inside both Column and Row. Container is meant to be used only when you need its decoration. If you want an empty box, use const SizedBox.shrink().

Try to use as many const widgets as you can.

[DanK]

Thank you for the help, and thank you for all the advice. I am tried padding with EdgeInsetsGeometry.symmetric(horizontal: 20) and I added the CrossAxisAlignment.stretch to the column, but the slider didn’t change. I am not sure if that is the correct padding to use for this case. What I am trying to do is this:

where the slider is connected to the borders of the phone.

Is there a way to increase the width of the slider?

Thank you again for the help.

[evaluator118]

The slider, in this case, have to be layered on top of the other widgets, because it must have a padding to accommodate its focus handler (that light blue circle around the slider):

What can you do is to create a Stacked layout, but, for me, it’s an ugly hack (especially because of the fixed sized elements and because the slider needs some padding, because the way it work):

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.red)
      home: Scaffold(
        body: Stack(
          children: [
            Positioned(
              left: 0,
              right: 0,
              top: 0,
              bottom: 150,
              child: ColoredBox(color: Colors.green),
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              height: 150,
              child: ColoredBox(
                color: Colors.blue
              ),
            ),
            Positioned(
              left: 10,
              right: 10,
              bottom: 140,
              child: Slider(onChanged: (newValue) {}, value: 0, padding: EdgeInsets.zero),
            ),
          ],
        ),
      ),
    );
  }
}

[DanK]

Thank you for the help. I got the slider to move on top of row (thank you), but the bar is still not shrinking.

Here is my code:

OverlayEntry(
      // Create a new OverlayEntry.
      builder: (BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Stack(
                  children: [
                    Positioned(
                      left: 10,
                      right: 10,
                      top: 0,
                      bottom: 140,
                      child: Slider(
                        // padding: EdgeInsetsGeometry.symmetric(horizontal: 40),
                        min: 0,
                        max: 100,
                        value: 100,
                        // max: value.totalDuration.inSeconds.toDouble(),
                        // value: value.currentDuration.inSeconds.toDouble(),
                        activeColor: Colors.white,
                        onChanged: (v) {},
                        // onChanged: (double newValue) {
                        //   setState(() => value2 = newValue);
                        // },
                        // onChangeEnd: (double double) {
                        //   value.seek(Duration(seconds: double.toInt()));
                        // },
                      ),
                    ),
                    Row(
                      children: [
                        Image.asset(
                          "assets/images/jazz.jpg",
                          height: 75,
                          width: 100,
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 20.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              DefaultTextStyle(
                                style: TextStyle(
                                  fontSize: 24.0,
                                  color: Color(0xffEAF0FF),
                                ),
                                child: Text("Song"),
                              ),
                              DefaultTextStyle(
                                child: Text("Artist"),
                                style: TextStyle(
                                  fontSize: 16.0,
                                  color: Color(0xB3A5C0FF),
                                ),
                              ),
                            ],
                          ),
                        ),
                        const Spacer(),
                        Padding(
                          padding: const EdgeInsets.only(right: 20.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Icon(Icons.skip_previous, size: 30),
                              Icon(Icons.pause, size: 30),
                              Icon(Icons.skip_next, size: 30),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
    );

Here is the screenshot

Should I not put the stack in the column or is the SafeArea causing this issue?

[DanK]

Nevermind, I had to remove SafeArea and it worked. Thank you for anyone that helped on this issue.

[evaluator118]

You don’t need SafeArea unless it is explicit (i.e.: Scaffold and ListTile has implicit SafeArea).

It’s a mess, but, that’s the way it is.

[DanK]

And I wouldn’t put a ListView inside a Column . ListView is meant to be used when you have a lot of items (so it only renders the items you are currently seeing). For those cases, a nested Column would do the trick. Especially if you decide after that the first column will be a child of a SingleChildScrollView (ListView inside Scrollable = Kaboom ).

My goal is to be able to upload any number of playlists with a possible max of 15. Would a ListView not make sense in that case?