how to center widgets in a row?-CodePudding

I want to have my TopNavBarLogo with the text "BestFitnesstrackerEU" on the left (start of the row), my TopNavBarItems "Informationen" and "Neuigkeiten" in the middle and at the end of the row "Login" and "Teilnehmer werden".

My problem is, that I can't center my TopNavBarItems in the middle. I tried to create a new row and use "mainAxisAlignment: MainAxisAlignment.center" and "mainAxisSize: MainAxisSize.min" to center it, but without success.

At the moment I am using "SizedBox(width: screenSize.width / 5)," to center the widgets, but there need to be a more accurate methode for this.

Here an image how the TopNavigationBar looks like:

How can I center the TopNavBarItems "Informationen" and "Neuigkeiten"?

Edit:

Renik Shiroya:

mainAxisAlignment : MainAxisAlignment.center

if you use min option, then please change to below:

mainAxisSize: MainAxisSize.max

answer: even when I use "mainAxisSize: MainAxisSize.max" it won't change anything.

This is an image when I delete my "SizedBox(width: screenSize.width / 5)," and use "mainAxisSize: MainAxisSize.max":

code:

  import 'package:bestfitnesstrackereu/widgets/top_navigation_bar/top_navigation_bar_logo.dart';
    import 'package:flutter/material.dart';
    import '../../routing/route_names.dart';
    import '../top_navbar_item/top_navbar_item.dart';
    
    
    class TopNavigationBarTabletDesktop extends StatelessWidget {
      const TopNavigationBarTabletDesktop({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        var screenSize = MediaQuery.of(context).size;
        return Container(
          height: 100,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(width: 30,),
              TopNavBarLogo(),
              SizedBox(width: 30,),
              Visibility(child: Text( "BestFitnesstrackerEU", style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.normal,))),
    
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget> [
                  SizedBox(width: screenSize.width / 5),
                  TopNavBarItem('Informationen', HomeRoute),
                  SizedBox(width: 40,),
                  TopNavBarItem('Neuigkeiten', EpisodesRoute),
                  SizedBox(width: 40,),
                ],
              ),
    
              Spacer(),
              SizedBox(width: 40,),
              TopNavBarItem('Login', AuthenticationPageRoute),
              SizedBox(width: 40,),
              TopNavBarItem('Teilehmer werden', RegristrationRoute)     
              SizedBox(width: 40,),
    
      ],
          ),
            );
      }
}

Thank you a lot for ur help!

CodePudding user response：

mainAxisAlignment : MainAxisAlignment.center,

if you use min option, then please change to below :

mainAxisSize: MainAxisSize.max

CodePudding user response：

I have deleted the row and used a spacer() instead.

Dunno why I haven't done this before.

CodePudding user response：

If you want three widget in row (Left (Starting), center and right (ending)) you can use mainAxisAlignment: MainAxisAlignment.spaceBetween to Row. No need to give calculated space between 2 widgets.