Background

I'm on day #3 of flutter, so bear with me. I know next to nothing

My Problem

I have a screen layout that is super complex with layers and layers of nested children.

Its become totally unreadable. Many of the items are tabbed so far to the right I am constantly scrolling left and right, making editing nearly impossible at this point.

My Solution

I want to break it all up into smaller pieces so I decided to make smaller widgets as so:

Widget sectionPost = Container(
  padding: const EdgeInsets.all(5),
  child: Text(
    'Some text',
    softWrap: true,
  ),
);

Which I then include into my main layout as follows:

Padding(
          padding: const EdgeInsets.symmetric(vertical:6.0,horizontal:10.0),
          child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(6.0),
              ),
              clipBehavior: Clip.antiAliasWithSaveLayer,
              elevation:0,
              child: sectionPost
          )
      )

My Question

This seems to be working OK (although its still tedious to find all the parts). Some of my data is in the form of variables which are passed into my main layout. My main layout is a Class / StatelessWidget with data fed into it from a JSON call. One of these variables is map

map['author'];

The variable map['author'] works just fine in my main layout Class, but when I've tried to break it up into smaller chunks via smaller widgets the variable is not recognized: Undefined name 'map'.

Is there an easy way to pass along these variables to my smaller bite-sized widgets for the purposes of constructing my larger layout?

Alternatives

As mentioned, I'm on day #3 of flutter, so if I'm approaching this problem totally incorrectly: I'm all ears to a different method of dealing with my underlying problem of a massive layout with unreadable nested code


Solution 1: enzo

You can create a StatelessWidget where you receive the author name as parameter:

class SectionPost extends StatelessWidget {
  final String name;

  const SectionPost(this.name);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      child: Text(name, softWrap: true),
    );
  }
}

Or, if you want to access more fields besides the author name, you can pass the map per se.

class SectionPost extends StatelessWidget {
  final Map<String, dynamic> map;

  const SectionPost(this.map);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      child: Text(map['author'], softWrap: true),
    );
  }
}

Then you can use it like that in your main code:

final Map<String, dynamic> map = /* ... */;

Padding(
  padding: const EdgeInsets.symmetric(vertical:6.0,horizontal:10.0),
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(6.0),
    ),
    clipBehavior: Clip.antiAliasWithSaveLayer,
    elevation:0,
    child: SectionPost(map['author']) // or SectionPost(map) if you chose the second approach
  ),
)