Exporting widgets into new one require to wrap them into column

Question

Let's assume I have this simple app:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text('App Name'),
          ),
        body:
          new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              /* widgets to extract */
              new Text(
              "qWerty1",
                style: new TextStyle(fontSize:12.0,
                color: const Color(0xFF000000),
                fontWeight: FontWeight.w200,
                fontFamily: "Roboto"),
              ),

              new Icon(
                Icons.insert_emoticon,
                color: const Color(0xFF000000),
                size: 48.0),

              /* widgets to extract */

              new Icon(
                Icons.insert_emoticon,
                color: const Color(0xFF000000),
                size: 48.0),

              new Icon(
                Icons.insert_emoticon,
                color: const Color(0xFF000000),
                size: 48.0)
            ]

          ),

      );
    }
}

If I want to extract the first Text and Icon widgets into separate widget (for e.g. I want to create a reusable widget), I need to wrap them with another Column. So now instead of having one Column, I now have 2 nested ones.

My extracted widget:

class Media extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              new Text(
              "qWerty1",
                style: new TextStyle(fontSize:12.0,
                color: const Color(0xFF000000),
                fontWeight: FontWeight.w200,
                fontFamily: "Roboto"),
              ),

              new Icon(
                Icons.insert_emoticon,
                color: const Color(0xFF000000),
                size: 48.0),
            ]

          );
    }
}

What I'm trying to say here is, that my purpose with extracting widgets into separate ones was to clean up my code, but now I introduced another widget (Column) into the widget three, which doesn't makes sense to me in the long run. For e.g. If I have a long dashboard screen, where I have a lot of widgets. If I then "refactor" them into separate widgets like above, then I will got a cluttered widget three with lots of Columns. Maybe I'm totally wrong and I should extract them in a different way. Can someone correct me on this?

That is not a problem. Flutter is designed to work well with very deep widget trees. The performance impact of dealing with the additional `Column` is negligible compared to the opportunity to create reusable widgets. — Ovidiu, Feb 23 '20 at 09:59

score 0 · Answer 1 · answered Feb 22 '20 at 12:14

you can create a function with return type List of Widgets without a class extending statelessWidget:

List<Widget> media() {
       return [
          new Text(
          "qWerty1",
            style: new TextStyle(fontSize:12.0,
            color: const Color(0xFF000000),
            fontWeight: FontWeight.w200,
            fontFamily: "Roboto"),
          ),

          new Icon(
            Icons.insert_emoticon,
            color: const Color(0xFF000000),
            size: 48.0),
        ] 
}

and in your main Column use the spread operator

body: Column(
        children:<Widget>[
              ...media(),
          ]
    )

you may find a better way to implement it

Thanks, but widgets functions are bad practice: [What is the difference between functions and classes to create widgets?](https://stackoverflow.com/a/53234826/4661692) — Runtime Terror, Feb 22 '20 at 15:31

Exporting widgets into new one require to wrap them into column

1 Answers1