Make the two text field always align together

Viewed 74

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",
                  ),
                ))
              ],
            )

enter image description here

3 Answers

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",
                        ),
                      ))
                ],
              )
            ],
          ),
        );
      }
    
    }

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.

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()
      ]
  )
)
Related