Make the two text field always align together - flutter

Question

How to make the length of the textField always same?
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Project"),
SizedBox(
width: 25,
),
Expanded(
child: TextField(
style: TextStyle(fontSize: 12),
// onChanged: (text) => _assetBloc.assetSink.add(text),
controller: _projectController,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
const BorderRadius.all(const Radius.circular(5.0))),
contentPadding: EdgeInsets.all(10),
hintText: "Phase 1",
labelText: "Phase 1",
),
))
],
),SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("To"),
SizedBox(
width: 25,
),
Expanded(
child: TextField(
style: TextStyle(fontSize: 12),
// onChanged: (text) => _assetBloc.assetSink.add(text),
controller: _projectController,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
const BorderRadius.all(const Radius.circular(5.0))),
contentPadding: EdgeInsets.all(10),
hintText: "Phase 1",
labelText: "Phase 1",
),
))
],
)

Answer 1

Try this code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: TextFields()
),
),
);
}
}
class TextFields extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: MediaQuery.of(context).size.width/7,
child: Text("Project")),
SizedBox(
width: 25,
),
Flexible(
child: TextField(
style: TextStyle(fontSize: 12),
// onChanged: (text) => _assetBloc.assetSink.add(text),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(5.0))),
contentPadding: EdgeInsets.all(10),
hintText: "Phase 1",
labelText: "Phase 1",
),
))
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: MediaQuery.of(context).size.width/7,
child: Text("To")),
SizedBox(
width: 25,
),
Expanded(
child: TextField(
style: TextStyle(fontSize: 12),
// onChanged: (text) => _assetBloc.assetSink.add(text),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(5.0))),
contentPadding: EdgeInsets.all(10),
hintText: "Phase 1",
labelText: "Phase 1",
),
))
],
)
],
),
);
}
}

Answer 2

Since you are using an Expanded widget your Textfield always take whatever room is left.
I think the trick here would be to wrap your Text Widget in a Container of fix width.

Answer 3

You could use a Row and 2 Columns for this
Row(
children: [
Column(
children: [
Text("Project"),
Text("To")
]
),
SizedBox(width: 10),
Expanded(
child: Column(
children: [
TextField(),
TextField()
]
)
)