Flutter align elements beside each other (column wise)

Question

I am developing an application in flutter and I want to make the texts, comboboxes and textfields aligned vertically and have the same width. Also I want to have some spaces between them such that they are not sticking together. Also initial values are not displayed in the textfields. How to do it in flutter?

Here is the code:

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:graphic/graphic.dart' as graphic;

import 'main.dart';
import 'gold.dart';

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:graphic/graphic.dart' as graphic;

import 'main.dart';
import 'gold.dart';

class Convert extends StatefulWidget {
  Convert({Key key, this.title = 'We Earn Finance'}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _ConvertState createState() => _ConvertState();
}

class _ConvertState extends State<Convert>
{

  List<String> currencies = [
    "USD", "EUR", "TRY", 'CAD', 'GBP', 'AUD', 'JPY', 'CHF', 'AED', 'QAR', 'BGN', 'DKK', 'SAR', 'CNY', 'RUB', 'NOK', 'SEK'
  ];
  String selectedCurrency1;
  String selectedCurrency2;
  double price;
  TextEditingController _controller1 = new TextEditingController();
  TextEditingController _controller2 = new TextEditingController();

  double round_to_2(double d)
  {
    double fac = pow(10.0, 3);
    double x = d * fac/10.0;
    fac = pow(10.0, 2);
    return (x).round() / fac;
  }

  onChangeDropdownItem1(String selectedCurrency) {

    selectedCurrency1 = selectedCurrency;
    if(selectedCurrency1 != selectedCurrency2)
    {
      fetchPairValue();
    }
    else {
      setState(() {
        price = 1.00;
        _controller1.text = '1.00';
        _controller2.text = '1.00';
      });
    }
  }

  onChangeDropdownItem2(String selectedCurrency) {
    setState(() {
      selectedCurrency2 = selectedCurrency;
      if(selectedCurrency1 != selectedCurrency2)
      {
        fetchPairValue();
      }
      else {
        setState(() {
          price = 1.00;
          _controller1.text = '1.00';
          _controller2.text = '1.00';
        });
      }
    });
  }

  void _onItemTapped(int index) {

    if(index == 0)
    {
      Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (BuildContext context) => MyHomePage(),
          ));
    }

    else if(index == 1)
    {
      Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (BuildContext context) => goldRate(),
          ));
    }
  }

  void fetchPairValue() async
  {
    final response = await http.get('https://www.currencyconverterrate.com/' +
        selectedCurrency1 +
        '/' +
        selectedCurrency2 +
        '.html');

    if (response.statusCode == 200) {
      // If the call to the server was successful, parse the JSON

      String htmlToParse = response.body;
      int idx1 = htmlToParse.indexOf("Bid Price") + 11; //
      int idx2 = htmlToParse.indexOf("Ask Price", idx1) + 11;

      int idx3 = htmlToParse.indexOf("<", idx1);
      int idx4 = htmlToParse.indexOf("<", idx2);

      setState(() {
        price = round_to_2((double.parse(htmlToParse.substring(idx1, idx3)) + double.parse(htmlToParse.substring(idx2, idx4)))/2.0);
        _controller1.text = '1.00';
        _controller2.text = price.toString();
      });
    } else {
      // If that call was not successful, throw an error.
      throw Exception('Failed to load post');
    }
  }

  @override
  void initState()
  {
    super.initState();
    selectedCurrency1 = "USD";
    selectedCurrency2 = "EUR";
    fetchPairValue();
  }

  onFieldChanged1(String value)
  {
    setState(() {
      _controller2.text = round_to_2(price*double.parse(value)).toString();
    });
  }

  onFieldChanged2(String value)
  {
    setState(() {
    _controller1.text = round_to_2(double.parse(value)/price).toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.

        title: Row(children: <Widget>[
          Image.asset(
            'images/logobig.png',
            width: 40.0,
            height: 40.0,
          ),
          Text(widget.title),
        ]),
        backgroundColor: Colors.blue,
      ),
      body:  Column(children: <Widget>[
            Row(children: [
            Text(
            "Select First Symbol",
            textScaleFactor: 1,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
              Text(
                "Select Second Symbol",
                textScaleFactor: 1,
                style: TextStyle(fontWeight: FontWeight.bold),
              )]),
        Row(children: [
        DropdownButton(
            value: selectedCurrency1,
            onChanged: (newValue) {
              onChangeDropdownItem1(newValue);
            },
            items: currencies.map((currency) {
              return DropdownMenuItem(
                child: new Text(currency),
                value: currency,
              );
            }).toList(),),
          DropdownButton(
            value: selectedCurrency2,
            onChanged: (newValue) {
              onChangeDropdownItem2(newValue);
            },
            items: currencies.map((currency) {
              return DropdownMenuItem(
                child: new Text(currency),
                value: currency,
              );
            }).toList(),)]),
        Row(children: [
        Container(
        width: 100, // do it in both Container
    child:
          TextField(keyboardType: TextInputType.numberWithOptions(decimal: true),
                    controller: _controller1,
                    onChanged:(value) {
                      onFieldChanged1(value);
                    }, )),
    Container(
    width: 100, // do it in both Container
    child:
          TextField(keyboardType: TextInputType.numberWithOptions(decimal: true),
                    controller: _controller2,
                    onChanged: (value) {
                      onFieldChanged2(value);
                    }, ))
        ],)
          ]),

      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Image.asset('images/dollar_world_grid.png',
              width: 46.0,
              height: 46.0,
            ),
            label: 'Currency',
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              'images/gold-bars.png',
              width: 46.0,
              height: 46.0,
            ),
            label: 'Gold',
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              'images/curr_conv1_selected.png',
              width: 46.0,
              height: 46.0,
            ),
            label: 'Convert',
          )
        ],
        currentIndex: 2,
        unselectedItemColor: Color.fromRGBO(127, 127, 127, 0.4),
        selectedItemColor: Color.fromRGBO(43, 73, 193, 0.4),
        onTap: _onItemTapped,
      ),);
  }
}

Thanks.

Answer 1

For aligning the widgets to the left and having them expand across, you can use:

  Column( 
    mainAxisAlignment: MainAxisaAignment.start,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [//your children]
  )

Answer 2

Try using Expanded:

body: Expanded(
    child: Column(
        children: <Widget>[...]
    )
 )