In this blog post, we’ll discuss why incorrect use of ParentDataWidget with Positioned Widget can cause issues in your Flutter app and how to avoid them.
Table of Contents
Steps to fix Incorrect use of ParentDataWidget by using positioned widget
Terminal message:
Usually, this means that the Positioned widget has the wrong ancestor RenderObjectWidget. Typically, Positioned widgets are placed directly inside Stack widgets.
The offending Positioned is currently placed inside a Column widget.
Above terminal message cleared that your issue is positioned inside a column widget. Positioned is not allowed directly inside any other widget it wants stack.
Also Read: [Solved] Red text and Yellow underlined below Text in Flutter
Error code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: const [
Positioned(
left: 10,
top: 10,
child: Text(
'Hello world !',
),
),
Positioned(
left: 10,
top: 40,
child: Text(
'How are you ? ',
),
),
],
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}Solution
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: const [
Positioned(
left: 10,
top: 10,
child: Text(
'Hello world !',
),
),
Positioned(
left: 10,
top: 40,
child: Text(
'How are you ? ',
),
),
],
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}FAQs
Can I use the Positioned Widget without a ParentDataWidget?
No, you need to wrap the Positioned Widget inside a ParentDataWidget to provide additional layout information to the parent widget.
What happens if I don’t provide the correct layout information in the ParentDataWidget?
The widget may not be positioned correctly, which can cause layout issues and make your app look unprofessional.
Can I use hardcoded values for layout information?
It’s best to avoid hardcoded values and use relative values, such as percentages or fractions, to ensure that your app looks good on different screen sizes and orientations.
Conclusion
Using the Positioned Widget in your Flutter app can help you achieve precise control over the position and size of your child widgets. However, it’s important to use it correctly to avoid layout issues and make your app look professional. By following the best practices outlined in this blog post, you can ensure that your app looks good and functions properly on different devices and screen sizes.
