CODEWITHSUNDEEP
flutterdart
szakes1
szakes1

Reputation: 904

How to adjust TextField width?

I'm re-writing a simple app which calculates averages. However, I have a hard time with a TextField. I would like it to be exactly as on a first screenshot.

The TextField's width is stretched, I don't want that. I want it to be exactly as it is on the screenshot.

Desired look: Desired look

What I have: What I have

Code:

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';

class ArithmeticAverageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('arithmetic_average_title').tr(),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Card(
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 20.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.help),
                      title: Text('arithmetic_average_help').tr(),
                      subtitle: Text('arithmetic_average_help_content').tr(),
                    )
                  ],
                ),
              ) 
            ),
            SizedBox(height: 16.0),
            Card(
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Text('arithmetic_average_your_grades', style: Theme.of(context).textTheme.headline5).tr(),
                    SizedBox(height: 16.0),
                    Text('arithmetic_average_grades_one_at_a_time', style: Theme.of(context).textTheme.headline6,).tr(),
                    SizedBox(height: 16.0),
                    Text('arithmetic_average_grade', style: Theme.of(context).textTheme.subtitle2).tr(),
                    TextField()
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }
}

Upvotes: 3

Views: 4246

Answers (4)

Dominik Roszkowski
Dominik Roszkowski

Reputation: 2523

You can try to wrap your TextField and Button with two Flexible widgets and apply desired proportions, e.g. 1:2 which would give you following result:

                Row(
                  children: [
                    Flexible(
                      flex: 1,
                      child: TextField(),
                    ),
                    Flexible(
                      flex: 2,
                      child: RaisedButton(
                          child: Text('Hello'), onPressed: () {}),
                    )
                  ],
                )
              ],

You can also replace the first Flexible with SizedBox and set an exact value, e.g:

                Row(
                  children: [
                    SizedBox(
                      width: 100.0,
                      child: TextField(),
                    ),
                    Flexible(
                      flex: 2,
                      child: RaisedButton(
                          child: Text('Hello'), onPressed: () {}),
                    )
                  ],
                )
              ],

enter image description here

TextField doesn't have an intrinsic size (width) constraint so it will always try to occupy all horizontal space. Flexible allows to constraint it to desired width in a Row.

Full example on DartPad.

Upvotes: 0

Jitesh Mohite
Jitesh Mohite

Reputation: 34170

This will help you make generic width on all devices, so here width * 0.3 means it will take 30% of the screen width

 Container(
          width: MediaQuery.of(context).size.width * 0.3,
          child: TextField(),
        )

Upvotes: 2

Dureksha Wasala
Dureksha Wasala

Reputation: 36

When ever you want to play with height and width you can use the widget Container.If you want to play with a property which cannot found in the widget you are using wrap it with a widget with that property will help you.

Container(
  margin: const EdgeInsets.only(right: 150),
  child: new TextField(
  decoration: new InputDecoration(
    hintText: 'Grade',
   )
  )
 )

Upvotes: 0

Jay Dangar
Jay Dangar

Reputation: 3469

Use Row Widget, and put Expanded Widget as child Widget and inside that put your widgets, as Expanded will take up equal space.

return Row(
  children: [
    Expanded(
       child: TextField();
    ),
    Expanded(
       child: Button();
    )
  ],
);

Upvotes: -1

Related Questions