How do I get my buttons to be in the available space? flutter-CodePudding

You can see that there is plenty of space between the image and those buttons. What I want to do is get those buttons in that space. I tried using positioned() but it didn't do what what I wanted.

Here's my code:

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xffCB2E2E),
          title: const Center(child: Text('MENU')),
        ),
        body: Center(
          child: Container(
            alignment: Alignment.topCenter,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Align(
                  alignment: Alignment.topCenter,
                  child: SizedBox(
                    height: 510,
                    width: 510,
                    child: Image.asset('images/drawing.png'),
                  ),
                ),
                
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      primary: Color.fromARGB(255, 74, 177, 77),
                      onPrimary: Colors.white,
                      minimumSize: Size(150, 45)),
                  onPressed: () {
                    print('hehe');
                  },
                  child: Text('click here'),
                ),
                SizedBox(
                  height: 30,
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      primary: Color.fromARGB(255, 74, 177, 77),
                      onPrimary: Colors.white,
                      minimumSize: Size(150, 45)),
                  onPressed: () {
                    print('hehe');
                  },
                  child: Text('click here'),
                ),
                SizedBox(
                  height: 30,
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      primary: Color.fromARGB(255, 74, 177, 77),
                      onPrimary: Colors.white,
                      minimumSize: Size(150, 45)),
                  onPressed: () {
                    print('hehe');
                  },
                  child: Text('click here'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

what should I do if I want those buttons to lay in that empty space instead? I think that is probably because of the size of that image but if that's the case I also need the image to be at least that big to look decent, so is there anyway to overlay the buttons on the image without covering completely if needed?

CodePudding user response：

You have added a SizedBox of height 510. Remove that and use expanded

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xffCB2E2E),
          title: const Center(child: Text('MENU')),
        ),
        body: Center(
          child: Container(
           height: MediaQuery.of(context).size.height,
            alignment: Alignment.topCenter,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child:Center(
                    child: Image.asset('images/drawing.png'),
                ),
               ),
                
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      primary: Color.fromARGB(255, 74, 177, 77),
                      onPrimary: Colors.white,
                      minimumSize: Size(150, 45)),
                  onPressed: () {
                    print('hehe');
                  },
                  child: Text('click here'),
                ),
                SizedBox(
                  height: 30,
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      primary: Color.fromARGB(255, 74, 177, 77),
                      onPrimary: Colors.white,
                      minimumSize: Size(150, 45)),
                  onPressed: () {
                    print('hehe');
                  },
                  child: Text('click here'),
                ),
                SizedBox(
                  height: 30,
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      primary: Color.fromARGB(255, 74, 177, 77),
                      onPrimary: Colors.white,
                      minimumSize: Size(150, 45)),
                  onPressed: () {
                    print('hehe');
                  },
                  child: Text('click here'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

You can reduce the height of the sizedbox with the image as child, to fit the image properly, you can use a FittedBox, so the image won't be distorted:

SizedBox(
  width: 510,
  height: 350, //example
  child: FittedBox(
    clipBehavior: Clip.hardEdge,
    fit: BoxFit.fitWidth,
    child: Image(),
  ),
),

edit: you need to add clipBehavior: Clip.hardEdge, so that the image won't render outside its borders