Flutter appbar Row independent alignment - flutter

Question

I've been trying to achieve this alignment in a flutter AppBar:
I tried doing it in multiple ways, with Flex (which didn't really work, all the widget got clustered together) and with static paddings...
Flex:
Don't know why my sizedBoxes expand... Also I don't know how to align the button, dropdown and drawer to the left...
AppBar(
backgroundColor: Theme.of(context).colorScheme.background,
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
fit: FlexFit.tight,
flex: 4,
child: Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Column(
children: const [
Image(
fit: BoxFit.contain,
image: AssetImage('assets/images/danube_logo.png'),
),
],
),
),
),
Flexible(
fit: FlexFit.tight,
flex: 6,
child: Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Column(
children: const [
Image(
fit: BoxFit.contain,
image: AssetImage('assets/images/eu_logo.png'),
),
],
),
),
),
const Flexible(
fit: FlexFit.tight,
flex: 2,
child: MyTripsButton(),
),
const Flexible(
fit: FlexFit.tight,
flex: 2,
child: LanguageSelector(),
),
const Flexible(
fit: FlexFit.tight,
flex: 2,
child: DrawerMenuButton(),
),
],
),
);
Paddings, kinda work but not the best solution...:
AppBar(
backgroundColor: Theme.of(context).colorScheme.background,
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(left: 13.0, right: 130.0),
child: Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Column(
children: const [
Image(
fit: BoxFit.contain,
image: AssetImage('assets/images/danube_logo.png'),
),
],
),
),
),
Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Column(
children: const [
Image(
fit: BoxFit.contain,
image: AssetImage('assets/images/eu_logo.png'),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 25.0),
child: const MyTripsButton(),
),
Padding(
padding: const EdgeInsets.only(right: 50.0),
child: const LanguageSelector(),
),
Padding(
padding: EdgeInsets.only(
right: 30.0,
),
child: DrawerMenuButton()),
],
),
);
Am I going around this the wrong way?

Answer 1

Just use two row widgets. Wrap your 2 left widgets within one row and other widgets in the second row. After this wrap both of your rows into a parent row and give the property of spaceBetween. Not the best solution but it will work