Flutter Mainaxisalignment not formatting correctly

Question

I have a problem with Flutter/Android studio that started today. Mainaxisalignment doesn't show the correct format
"titledistance" in stead of "title distance"

I think I didn't change any code but probably pub get/upgrade,... I also have problems with my provider (I’m talking about provider for Firebase auth).

This is a total new project with only this Dart file, the same problem here. Same problem in VS-Code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;


  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    String title = "title";
    String value1 = "distance";
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: FittedBox(
          fit: BoxFit.fitWidth,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title),
              Text(value1),
            ],
          ),
        ),
        actions: <Widget>[
          if (title != 'Settings' ) //|| title != 'Laatste Minuut Risico Analyse'
            IconButton(
              icon: const Icon(Icons.settings),
              tooltip: 'Settings',
              onPressed: () {
                Navigator.pushNamed(context, '/settings');
              },
            ),
            IconButton(
            icon: const Icon(Icons.logout),
            tooltip: 'Logout',
            onPressed: () => showDialog<String>(
              context: context,
              builder: (BuildContext context) => AlertDialog(
                title: const Center(child: Text('Logout')),
                content: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Text('Are you sure you want to logout?'),
                  ],
                ),
                actions: <Widget>[
                  TextButton(
                    onPressed: () => Navigator.pop(context, 'Cancel'),
                    child: const Text('Cancel'),
                  ),
                  TextButton(
                    onPressed: () {
                      //context.read<AuthenticationProvider>().signOut(context);
                      Navigator.pop(context, 'SignOut');
                    },
                    child: const Text('Yes'),
                  ),
                ],
              ),
            ),
          ),
        ],)
      ,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

score 1 · Accepted Answer · answered Nov 21 '21 at 19:09

1- The problem is the FittedBox class which scales and positions its child within itself according to fit.

To undestand the problem, first add the BoxDecoration to your code to see this:

Code to show the BoxDecoration:

centerTitle: true,
title: Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: FittedBox(
    fit: BoxFit.fitWidth,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text(
            title,
            style: const TextStyle(fontSize: 40),
          ),
        ),
        Container(
            decoration:
                BoxDecoration(border: Border.all(color: Colors.white)),
            child: Text(value1)),
      ],
    ),
  ),
),

Using FittedBox(fit: BoxFit.fitWidth, you are forcing the box to fit to the width of the child - the black border box in the above picture.

2- Then using mainAxisAlignment: MainAxisAlignment.spaceBetween, is meaningless since there is no space at all to put between the items. unless you remove the FittedBox e.g.:
Code:

centerTitle: true,
title: Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
        decoration:
            BoxDecoration(border: Border.all(color: Colors.white)),
        child: Text(
          title,
          style: const TextStyle(fontSize: 40),
        ),
      ),
      Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text(value1)),
    ],
  ),
),

Now you'll see the space between:
Code:

centerTitle: true,
title: Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
        decoration:
            BoxDecoration(border: Border.all(color: Colors.white)),
        child: Text(
          title,
          style: const TextStyle(fontSize: 40),
        ),
      ),
      Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text('spaceBetween')),
      Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text(value1)),
    ],
  ),
),

Or using just a single space Text(' '):

Now add the FittedBox:

centerTitle: true,
title: Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: FittedBox(
    fit: BoxFit.fitWidth,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text(
            title,
            style: const TextStyle(fontSize: 40),
          ),
        ),
        Container(
            decoration:
                BoxDecoration(border: Border.all(color: Colors.black)),
            child: Text(' ')),
        Container(
            decoration:
                BoxDecoration(border: Border.all(color: Colors.white)),
            child: Text(
              value1,
              style: const TextStyle(fontSize: 40),
            )),
      ],
    ),
  ),
),

So you have some options:

1- Use Padding for one or both items:

children: [
  Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(title),
  ),
  Text(value1),
],

2- You may use dummy Container, SizedBox, or Text(' '), :

children: [
  Text(title),
  SizedBox(width: 8), // Container(width: 8), // Text(' '),
  Text(value1),
],

or simply add one space e.g.:

 Text(title + ' '),

or

 Text(' ' + value1),

and see (note: Row instead of Column):
Space between Column's children in Flutter

Set the space between Elements in Row Flutter

Thanks for the explaination. I used it as a widget appbar and yesterday it worked like that and today it doesn’t. Any Idea how? — JBoudry, Nov 21 '21 at 19:30
So you need to compare the upgraded version with the previous one to find out the difference. use diff tool to find out. if you still have the previous version try to run it without upgrade, is it working? — wasmup, Nov 21 '21 at 19:58
I think I got the source of this problem. Sometimes my title is so long that it was overflowing. That’s the reason I added the fittedbox — JBoudry, Nov 21 '21 at 20:13

score 0 · Answer 2 · answered Nov 21 '21 at 17:37

no need to add extra code for this using one line of code we can do this.

 title: FittedBox(
          fit: BoxFit.fitWidth,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title),
              Text(value1),
            ],
          ),
        ),

replace with

   title: Text("$title $value1"),

or you can use SizedBox()

          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title),
              SizedBox(width:5),
              Text(value1),
            ],
          ),
        ),

It is an extract from my other (larger code). there it is: 'child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Text(title!), if (value1 != null) Text(value1!), if (value2 != null) Text(value2!), if (value3 != null) Text(value3!), ],' It was working before — JBoudry, Nov 21 '21 at 17:37

Flutter Mainaxisalignment not formatting correctly

2 Answers2