How to Fix layout in Top Flutter

Question

How to Fix layout in Top Flutter i cant not fix box color to top .....................................................................................................................................................................................................................................

 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { final TextEditingController controllernum1 = TextEditingController(); final TextEditingController controllernum2 = TextEditingController(); final TextEditingController controllernum3 = TextEditingController(); String text = ''; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: EdgeInsets.fromLTRB(5, 15, 5, 0), child: Row( children: <Widget>[ Expanded( child: Container( child: Column( children: [ new Flexible( child: new TextField( controller: controllernum1, decoration: const InputDecoration(hintText: 'Red 0-255'), style: TextStyle( fontSize: 20.0, )), ), new Flexible( child: new TextField( controller: controllernum2, decoration: const InputDecoration( hintText: 'Green 0-255'), style: TextStyle( fontSize: 20.0, )), ), new Flexible( child: new TextField( controller: controllernum3, decoration: const InputDecoration(hintText: 'Blue 0-255'), style: TextStyle( fontSize: 20.0, )), ) ], ), )), Expanded( child: Container( width: 100, height: 150, decoration: BoxDecoration( color: Color(0xff7c94b6), border: Border.all( color: Colors.black, ), ), // ) )), ], ))), ); } }

My result

enter image description here

I want to this layout enter image description here

Answer 1

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController controllernum1 = TextEditingController();
  final TextEditingController controllernum2 = TextEditingController();
  final TextEditingController controllernum3 = TextEditingController();
  String text = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Padding(
              padding: EdgeInsets.fromLTRB(5, 15, 5, 0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start, // I added .
                children: <Widget>[
                  Expanded(
                      child: Container(
                    child: Column(
                      children: [
                        new Flexible(
                          child: new TextField(
                              controller: controllernum1,
                              decoration:
                                  const InputDecoration(hintText: 'Red 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        ),
                        new Flexible(
                          child: new TextField(
                              controller: controllernum2,
                              decoration: const InputDecoration(
                                  hintText: 'Green 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        ),
                        new Flexible(
                          child: new TextField(
                              controller: controllernum3,
                              decoration:
                                  const InputDecoration(hintText: 'Blue 0-255'),
                              style: TextStyle(
                                fontSize: 20.0,
                              )),
                        )
                      ],
                    ),
                  )),
                  Expanded(
                      child: Container(
                    width: 100,
                    height: 150,
                    decoration: BoxDecoration(
                      color: Color(0xff7c94b6),
                      border: Border.all(
                        color: Colors.black,
                      ),
                    ),
                    // )
                  )),
                ],
              ))),
    );
  }
}

Answer 2

Here is your solution.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController controllernum1 = TextEditingController();
  final TextEditingController controllernum2 = TextEditingController();
  final TextEditingController controllernum3 = TextEditingController();
  String text = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Padding(
              padding: EdgeInsets.fromLTRB(5, 15, 5, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Expanded(
                    child: Container(
                      width: MediaQuery.of(context).size.width * .5,
                      child: Column(
                        children: [
                          new Flexible(
                            child: new TextField(
                                controller: controllernum1,
                                decoration: const InputDecoration(
                                    hintText: 'Red 0-255'),
                                style: TextStyle(
                                  fontSize: 20.0,
                                )),
                          ),
                          new Flexible(
                            child: new TextField(
                                controller: controllernum2,
                                decoration: const InputDecoration(
                                    hintText: 'Green 0-255'),
                                style: TextStyle(
                                  fontSize: 20.0,
                                )),
                          ),
                          new Flexible(
                            child: new TextField(
                                controller: controllernum3,
                                decoration: const InputDecoration(
                                    hintText: 'Blue 0-255'),
                                style: TextStyle(
                                  fontSize: 20.0,
                                )),
                          )
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      width: 100,
                      height: 150,
                      decoration: BoxDecoration(
                        color: Color(0xff7c94b6),
                        border: Border.all(
                          color: Colors.black,
                        ),
                      ),
                      // )
                    ),
                  ),
                ],
              ))),
    );
  }
}