TextFormfield on the right side

user_16082854 0
Viewed 76
class VitalWidget extends StatelessWidget {
  VitalWidget({
    this.vitalType,
    this.unit,
    this.initialValue,
    Key key,
  }) : super(key: key);
  final String vitalType;
  final String unit;
  final String initialValue;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 40),
              child: Text(
                vitalType,
                style: TextStyle(fontSize: 15),
              ),
            ),
            Row(
              children: [
                SizedBox(
                  width: 90,
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: TextFormField(
                      initialValue: initialValue,
                      textAlign: TextAlign.center,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      decoration: const InputDecoration(),
                    ),
                  ),
                ),
                Text(unit),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

I know this is not a like hard thing to do but ive been stuck on it for a while now. Is there a way to make the textformfield and the text(unit) on the right side of the screen? i tried using padding but they werent in line with each other and on different screens it would look so weird.Its so simple but i cant figure it out

dart flutter
3 Answers

You could simply use Spacer in the Row widget. What Spacer actually does is it takes all the available space on the screen. You could do something like this:

class VitalWidget extends StatelessWidget {
  VitalWidget({
    this.vitalType,
    this.unit,
    this.initialValue,
    Key key,
  }) : super(key: key);
  final String vitalType;
  final String unit;
  final String initialValue;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Spacer(),    //It will take all the available space on the left
            Padding(
              padding: const EdgeInsets.only(left: 40),
              child: Text(
                vitalType,
                style: TextStyle(fontSize: 15),
              ),
            ),
            Row(
              children: [
                SizedBox(
                  width: 90,
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: TextFormField(
                      initialValue: initialValue,
                      textAlign: TextAlign.center,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      decoration: const InputDecoration(),
                    ),
                  ),
                ),
                Text(unit),
              ],
            ),
          ],
        ),
      ],
    );
  }
}
user_128044000

You can add a Spacer() widget to your row:

class VitalWidget extends StatelessWidget {
  VitalWidget({
    this.vitalType,
    this.unit,
    this.initialValue,
    Key key,
  }) : super(key: key);
  final String vitalType;
  final String unit;
  final String initialValue;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 40),
              child: Text(
                vitalType,
                style: TextStyle(fontSize: 15),
              ),
            ),
            const Spacer(), //<- this pushes your textfield to the right
            Row(
              children: [
                SizedBox(
                  width: 90,
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: TextFormField(
                      initialValue: initialValue,
                      textAlign: TextAlign.center,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      decoration: const InputDecoration(),
                    ),
                  ),
                ),
                Text(unit),
              ],
            ),
          ],
        ),
      ],
    );
  }
}
user_108472240

You can use spacer as mentioned in others answer and can also set the Row widget property mainAxisAlignment to MainAxisAlignment.end as below:

Row(
 mainAxisAlignment: MainAxisAlignment.end;
 children: //rest of your code
);
user_91380270
Related