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.
);
}
}
2
Answers
no need to add extra code for this using one line of code we can do this.
replace with
or you can use SizedBox()
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
: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 theFittedBox
e.g.:Code:
Now you’ll see the space between:
Code:
Or using just a single space
Text(' ')
:Now add the
FittedBox
:So you have some options:
1- Use
Padding
for one or both items:2- You may use dummy
Container
,SizedBox
, orText(' '),
:or simply add one space e.g.:
or
and see (note: Row instead of Column):
Space between Column's children in Flutter
Set the space between Elements in Row Flutter