Flutter: How to align on start and center in Flutter Row-CodePudding

I want create this layout layout

4 buttons align to left and Text and edit button align to center so in web there will be some space

I tried flexible with FlexFit but did not get result as i want (text and edit buton in middle)

CodePudding user response：

If I understand what you want correctly, you should use Expanded. It fills the remaining space in a Row/Column :

Row(
    children: [
        Button(),
        Button(),
        Button(),
        Expanded(
            child: Center(
                child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                        Text(),
                        Button(),
                    ]),
            )
        ),
),

CodePudding user response：

To create this layout you will require a row with 3 expanded widgets

Row(
  children :[
     Expanded(flex: 4, fit: FlexFit.tight,
       child: Row(
         //All 4 buttons here
       )
     ),
     Expanded(flex: 4, fit: FlexFit.tight,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.center,
         //Text with icon here
       )
     ),
     if(MediaQuery.of(context).size.width > 700)Expanded(flex: 4, fit: FlexFit.tight,
       child: Spacer(),
     ),
   ]
)