Question 193335 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Centered SizedBox won't center

I want to center a SizedBox that I have created, so I wrapped it with a Center widget, like so:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'My app',
      home: SafeArea(
        child: MyScaffold(),
      ),
    ),
  );
}

class MyScaffold extends StatelessWidget {
  const MyScaffold({super.key});
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          TextInputWidget(),
        ],
      ),
    );
  }
}

class TextInputWidget extends StatelessWidget {
  const TextInputWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Center(
          child: SizedBox(
            width: 200.0,
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter a search term',
              ),
            ),
          ),
        ),
      ],
    );
  }
}

But unfortunately, it does not work, as you can see on the picture below, the SizedBox is still on the left side on the window:

enter image description here

I have been looking for an answer, but did not find one yet.

Any solution for this?

Thanks

Tags:

3

Answers


  1. 0

    Instead of using a Center widget you should use the MainAxisAlignment of the row:

    class TextInputWidget extends StatelessWidget {
  const TextInputWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          width: 200.0,
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Enter a search term',
            ),
          ),
        ),
      ],
    );
  }
}
    Login or Signup to reply.
  2. 0

    You are trying to Center your SizedBox widget but the problem is, SizedBox won’t able to know where it’s position to centeralized because of its parent widget.

    You can control that property with 2 options.

    1st Solution using mainAxisAlignment property.

    class TextInputWidget extends StatelessWidget {
  const TextInputWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: SizedBox(
            width: 200.0,
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter a search term',
              ),
            ),
          ),
        ),
      ],
    );
  }
}

    or

    2nd Solution using Flexible at here because you are limiting your SizedBox’s width property, if you wan’t to cover all the available space at Row’s available zone’s use Expanded instead.

    Row(
  children: [
    Spacer(),
    Flexible(
      child: Center(
        child: SizedBox(
          width: 200.0,
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Enter a search term',
            ),
          ),
        ),
      ),
    ),
    Spacer(),
  ],
);
    Login or Signup to reply.
  3. 0

    According to the Center documentation:

    This widget will be as big as possible if its dimensions are constrained and widthFactor and heightFactor are null. If a dimension is unconstrained and the corresponding size factor is null then the widget will match its child’s size in that dimension.

    In a Row, children are unconstrained on the primary axis. To make a child widget such as the Center take up all the available space, wrap it in an Expanded widget.

    (The Row API documentation has a detailed explanation of its layout mechanics. It’s a very nice read.)

    class TextInputWidget extends StatelessWidget {
  const TextInputWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Center(
            child: SizedBox(
              width: 200.0,
              child: TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Enter a search term',
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

    Alternatively, you could set the Row alignment using mainAxisAlignment instead.

    class TextInputWidget extends StatelessWidget {
  const TextInputWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          width: 200.0,
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Enter a search term',
            ),
          ),
        ),
      ],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search