I want to use remaining available space on my page in Flutter-CodePudding

In the screen, I have a Column, it has a cusotm made widget of specific height. Then, I have Expanded, in which I have a TabBar which has three tabs.

In one of those tabs, I want to show a list. First, I have a padding, which contains column. The column has some text, which should remain at top and the list should be shown in the space which is remaining. I am using Expanded for that, but it is not working.

I can't use ListView directly, and also can't use expanded. It is only working when I am giving it a container of fix size. Now, in different screens, it will look different. So, I want to take all of the remaining space and build the list there. Code for reference -

Here is the doubts screen, which is one of the tabs of main screen -

import 'package:flutter/material.dart';
import 'package:my_board_plus/size_config.dart';
import 'package:my_board_plus/styles.dart';

import '../../api_handling/api_fetch/fetch_doubt_questions.dart';
import '../../data_models/doubt_question_model.dart';

class NewDoubtsScreen extends StatefulWidget {
  const NewDoubtsScreen({Key? key}) : super(key: key);

  @override
  State<NewDoubtsScreen> createState() => _NewDoubtsScreenState();
}

class _NewDoubtsScreenState extends State<NewDoubtsScreen> {

  late Future<List<DoubtQuestionModel>> doubtQuestionsList;

  @override
  void initState() {
    doubtQuestionsList = fetchDoubtQuestion();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor2,
      floatingActionButton: Container(
        width: getProportionateScreenWidth(130),
        height: getProportionateScreenHeight(50),
        decoration: BoxDecoration(
          color: brandPurple,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(20)),
        ),
        child: Center(
          child: Text(
            '?    My Doubts',
            style: TextStyle(
              color: Colors.white,
              fontSize: 15,
            ),
          ),
        ),
      ),
      body: Padding(
        padding: EdgeInsets.only(top: 8.0, left: 5),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Trending Doubts',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                Text(
                  'View all',
                  style: TextStyle(
                    color: brandYellow,
                    decoration: TextDecoration.underline
                  ),
                ),
              ],
            ),

            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Container(
                height: getProportionateScreenHeight(530),
                width: double.infinity,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The red area that you are seeing is the one. I want it to occupy whole area available in the phone screen, so I can show list in it which should be scrollable. In this case, it is occupying all, but in different screens, it might not. So, please give me some suggestions.

CodePudding user response：

You can try to give the height of the container like

height: double.infinity

Or you can give the height of it with substracting the other height from the screen size like

height: MediaQuery.of(context).size.height - getProportionateScreenHeight(50) //the heigth size that you give the other widget that top of it

CodePudding user response：

try to wrap your Padding widget with the Expanded widget,

Expanded widget in column will take the rest of the space of the screen.

also no need to give height to Container widget, so you can remove getProportionateScreenHeight(530) this one