[Solved] Incorrect use of ParentDataWidget by using positioned widget

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.

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.

Incorrect use of ParentDataWidget by using positioned widget Solved

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.

Share:

Ambika Dulal is a Flutter developer from Nepal who is passionate about building beautiful and user-friendly apps. She is always looking for new challenges and is eager to learn new things. She is also a strong believer in giving back to the community and is always willing to help others.

Leave a Comment

AO Logo

App Override is a leading mobile app development company based in Kathmandu, Nepal. Specializing in both Android and iOS app development, the company has established a strong reputation for delivering high-quality and innovative mobile solutions to clients across a range of industries.

Services

UI/UX Design

Custom App Development

Mobile Strategy Consulting

App Testing and Quality Assurance

App Maintenance and Support

App Marketing and Promotion

Contact

App Override

New Plaza, Kathmandu