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

I have some issues creating a Flutter UI. My button can't get a certain height

import 'package:flutter/material.dart';
import 'package:test_app/button.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  TestButton(buttonText: '1', onPressed: () {}),
                  TestButton(buttonText: '2', onPressed: () {}),
                ],
              ),
              Expanded(
                child: TestButton(buttonText: '3', onPressed: () {}),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

This my code so far, the button with the text "3" is just next to button "1". The hight below is missing:

This is how my UI looks like now

I want the App UI to look like this Picture:

Buttons should be placed like this

I tried to look a solution up on the Flutter documentation and I also tried it with ChatGPT without success. Maybe there is someone who is able to help me, thank you.

Tags:

2

Answers


  1. 0

    Your problem is that you managed the arrangement of your elements badly. The beauty of Dart, from my point of view, is that you can arrange the elements as you like and like, with many besstemmies sometimes. I advise you to divide the screen space in half, with size box or you can use a row and inside put two expansion and inside them put the buttons so they will take

    coumn

    • expanded
      • row
        • button 1
        • button 2
    • expanded
      • button 3

    It would be the scheme of what I explained to you above.
    Your mistake was to have put out the Expanded that contains the 3 button from Column. You have to put it in.

    Login or Signup to reply.
  2. 0

    Try this Code

    Widget body() {
   return Center(
    child: Row(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: [
       Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            TextButton(child: const Text('button'), onPressed: () {}),
            TextButton(child: const Text('button1'), onPressed: () {}),
          ],
        ),
      ),
      Expanded(
        child: Container(
            color: Colors.grey,
            child: TextButton(child: const Text('button2'), onPressed: () {})),
      ),
    ],
   ),
 );

}

@override
Widget build(BuildContext context) {
  return Scaffold(
     appBar: AppBar(title: const Text('Home')),
     body: body()
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search