Question 77218 in Flutter Question posted in
The official Flutter documentation can be found here.

How to give height based on available height for customWidget in flutter

I have created a customWidget for showing data named CustomShowDataWidget, and this widget is used in many screens but with different available heights.. so how to apply height based on available screen height…

here is my custom widget

class ShowTransactionWidget extends StatelessWidget {
   ShowTransactionWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,//-< I have given fixed height what I dont want...
      color: Colors.grey.shade200,
      child: Column(
        children: [
          Align(
            child: Text('Recent Transactions',style: TextStyle(
                color: Colors.blue,
                fontSize: 20
            ),),
            alignment: Alignment.centerLeft,
          ),
          Expanded(
            child: ListView.builder(
                itemCount: 100,
                itemBuilder: (context,index){
                  return ListTile(
                    title: Text('Hello $index'),
                  );
                }),
          )
        ],),
    );
  }
}

here is the one of the screen where I am using this widget


class NextScreen extends StatelessWidget {
  const NextScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(children: [
        Container(
          color: Colors.blue,
          height: MediaQuery.of(context).size.height*0.70,

        ),
        ShowTransactionWidget(),

      ],),
    );
  }
}
Tags:

2

Answers


  1. 0

    Try the following code:

    class ShowTransactionWidget extends StatelessWidget {
  const ShowTransactionWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        color: Colors.grey.shade200,
        child: Column(
          children: [
            const Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "Recent Transactions",
                style: TextStyle(color: Colors.blue, fontSize: 20),
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: 100,
                itemBuilder: (context, index) {
                  return const ListTile(
                    title: Text("Hello"),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

    ShowTransactionWidget(),
    Login or Signup to reply.
  2. 0

    You want your widget ShowTransactionWidget to have a height which is relative to the available height given to it.

    Okay, first, you must learn that in flutter, Constraints go down. Sizes go up. Parent sets position. So if your widget can be a part of other widgets, don’t always expect it can take the size you want it to take.

    After you learn that, you have multiple options:

    • Use LayoutBuilder widget to wrap your Container. This widget will give you the available constraints to your widget, and you can use the max height to determine the height of your widget.
    class ShowTransactionWidget extends StatelessWidget {
  ShowTransactionWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final maxHeight = constraints.maxHeight;
        return Container(
          height: maxHeight/2,
...
    • Use the MediaQuery to get the size inside your ShowTransactionWidget, but you may want more information than the size of the screen as your widget might not be allowed to have the whole size of the screen, so this option might not fit all cases.
    class ShowTransactionWidget extends StatelessWidget {
  ShowTransactionWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size; // The size of the media in logical pixels (e.g, the size of the screen).
    return Container(
      height: size.height/2,
...
    • Pass the max height to your ShowTransactionWidget in its constructor, and then define the height of the Container relative to that height
    class ShowTransactionWidget extends StatelessWidget {
  final double height;
  
  ShowTransactionWidget({Key? key, required this.height}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: height, // passed from parent, this method of passing the height is useful when your child's height is always determined by the parent's height
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search