How to have control over height of container when container inside expanded

Question

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal Buttons'),
        ),
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        // Action for button 1
                      },
                      child: Container(
                        padding: EdgeInsets.all(12),
                        color: Colors.blue,
                        child: Center(
                          child: Text(
                            'Button 1 with long text to test the wrapping',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(width: 16), // Spacer between the buttons
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        // Action for button 2
                      },
                      child: Container(
                        padding: EdgeInsets.all(12),
                        color: Colors.green,
                        child: Center(
                          child: Text(
                            'Button 2 with long text to test the wrapping',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I want to increase only size of button vertically to adjust according to length of content.The above code is occupying screen both horizontally and vertically. i want vertical height to be occupied according to length of the content.Can any one help me pelase,Thank you.

i want vertical height to be occupied according to length of the content.Can any one help me pelase,Thank you.

Answer 1

Don't make the row expand in the column: because it will allocate all of the available screen space.

you only need to let the large button that will take a very long text to expand within the row:

try

  @override
  Widget build(BuildContext context){

    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(20),
            child:Row(
            children: [

              Expanded(child:
                GestureDetector(
                  onTap:(){},
                  child: Container(
                  
                    color: Colors.amber,
                    child:Text('HI, button 1 long text here, long text herelong text herelong text herelong text herelong text herelong text herelong text herelong text herelong text here'),
                  ),
                ),),
             

              SizedBox(width: 20,),

               
               GestureDetector(
                  onTap:(){},
                  child: Container(
                    color: Colors.green,
                    child:Text('button2'),
                  ),
                ),
              
            ],
          ))
        ],
      )
    );
  }
}

and of course you can align both buttons using mainAxisAlignment property of the Row widget.

Hope it helps you.