Using Expanded widget with Column in flutter

Question

im trying to use Expanded widget inside Column, i have tried various methods but nothing seems to be working!

so far i have been successfully built this:

The image

but as it shows, the listview that i have put inside Expanded widget goes under the other widgets,(and the expanded widget is scrolling but the widget on top is in a fixed position) and i tried to put the expanded widget inside another column, and also tried to put the both into separate Expanded widgets, but nothing seems to be working,

i really appreciate your help

here is my code that generates the image above:

import 'package:fluapp/constants.dart';
import 'package:fluapp/models/music_model.dart';
import 'package:fluapp/widgets/custom_button_widget.dart';
import 'package:fluapp/widgets/custom_progress_widget.dart';
import 'package:flutter/material.dart';

class PlayerPage extends StatefulWidget {
  @override
  _PlayerPageState createState() => _PlayerPageState();
}

class _PlayerPageState extends State<PlayerPage>
    with SingleTickerProviderStateMixin {
  List<MusicModel> _list;
  int _playid;
  var _value;
  AnimationController _controller;
  var isPlay;
  @override
  void initState() {
    _playid = 3;
    _list = MusicModel.list;
    _value = 0.0;
    _controller =
    AnimationController(vsync: this, duration: Duration(milliseconds: 250));
    isPlay = true;
    super.initState();
  }

  Widget build(BuildContext context) {
    return Scaffold(
  backgroundColor: AppColors.mainColor,
  body: Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(12),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            CustomButtonWidget(
              size: 50,
              onTap: () {
                Navigator.of(context).pop();
              },
              child: Icon(
                Icons.arrow_back,
                color: AppColors.styleColor,
              ),
            ),
            Text("PLAYING NOW",
                style: TextStyle(
                  color: AppColors.styleColor,
                  fontWeight: FontWeight.bold,
                )),
            CustomButtonWidget(
              size: 50,
              onTap: () {},
              child: Icon(
                Icons.menu,
                color: AppColors.styleColor,
              ),
            ),
          ],
        ),
      ),
      CustomButtonWidget(
        image: "assets/logo.jpg",
        size: MediaQuery.of(context).size.width * .7,
        borderWidth: 5,
        onTap: () {},
      ),
      Text(
        "Flume",
        style: TextStyle(
          color: AppColors.styleColor,
          fontSize: 32,
          fontWeight: FontWeight.bold,
          height: 2,
        ),
      ),
      Text(
        "Flume kucha",
        style: TextStyle(
          color: AppColors.styleColor.withAlpha(90),
          fontSize: 16,
          fontWeight: FontWeight.bold,
        ),
      ),
      Expanded(child: SizedBox()),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: customProgressWidget(
          value: _value,
          labelStart: "1:21",
          labelEnd: "3:46",
        ),
      ),
      Expanded(child: SizedBox()),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 42),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            CustomButtonWidget(
              size: 80,
              onTap: () {
                setState(() {
                  if (_value > .1) {
                    _value -= .1;
                  }
                });
              },
              child: Icon(
                Icons.fast_rewind,
                color: AppColors.styleColor,
              ),
              borderWidth: 5,
            ),
            CustomButtonWidget(
              size: 80,
              onTap: () {
                if (_controller.value == 0.0) {
                  _controller.forward();
                  setState(() {
                    isPlay = false;
                  });
                } else {
                  _controller.reverse();
                  setState(() {
                    isPlay = true;
                  });
                }
              },
              child: AnimatedIcon(
                icon: AnimatedIcons.pause_play,
                progress: _controller,
                color: isPlay ? Colors.white : AppColors.styleColor,
              ),
              borderWidth: 5,
              isActive: isPlay,
            ),
            CustomButtonWidget(
              size: 80,
              onTap: () {
                setState(() {
                  if (_value < .9) {
                    _value += .1;
                  }
                });
              },
              child: Icon(
                Icons.fast_forward,
                color: AppColors.styleColor,
              ),
              borderWidth: 5,
            ),
          ],
        ),
      ),
      SizedBox(height: 25),
//to here

      Expanded(
        child: ListView.builder(
          itemCount: _list.length,
          padding: EdgeInsets.all(5),
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                setState(() {
                  _playid = _list[index].id;
                });
              },
              child: Container(
                decoration: BoxDecoration(
                  color: _list[index].id == _playid
                      ? AppColors.activeColor
                      : AppColors.mainColor,
                  borderRadius: BorderRadius.all(
                    Radius.circular(20),
                  ),
                ),
                padding: EdgeInsets.all(16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          _list[index].title,
                          style: TextStyle(
                            color: AppColors.styleColor,
                            fontSize: 16,
                          ),
                        ),
                        Text(
                          _list[index].album,
                          style: TextStyle(
                            color: AppColors.styleColor.withAlpha(90),
                            fontSize: 16,
                          ),
                        ),
                      ],
                    ),
                    CustomButtonWidget(
                      child: Icon(
                        _list[index].id == _playid
                            ? Icons.pause
                            : Icons.play_arrow,
                        color: _list[index].id == _playid
                            ? Colors.white
                            : AppColors.styleColor,
                      ),
                      size: 50,
                      isActive: _list[index].id == _playid,
                      onTap: () {
                        setState(() {
                          _playid = _list[index].id;
                        });
                      },
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),
);

} }

Answer 1

Currently your outer column is deciding that there's no scroll behavior. You can wrap it with a SingleChildScrollable but then you'd face the problem of flexible children in a non flexible area. One solution that keeps your flexible layout is using a MediaQuery and just defining a large box as your flexible area:

return Scaffold(
  body: ListView(
    children: [
      SizedBox(
        height: MediaQuery.of(context).size.height - 100,
        child: Column(
          children: [
            // Your flexible media player widgets
          ],
        ),
      ),
      ListView.builder(
        shrinkWrap: true,
        primary: false,
        itemCount: 10,
        itemBuilder: (_, __) {
          return ListTile(
            title: Text('song title'),
          );
        },
      ),
    ],
  ),
);