Reusuable Stateless Widgets

Question

I am creating reusable stateless widget for troubleshooting and maintenance. MyApp1 is a statelesswidget and am calling this widget MyApp1(title: 'title',) from a statefull widget.In order to segregate many lines of code and make troubleshooting simpler, another widgets firstone and Secondone are created. Here am passing a title data. I made two widgets firstone (widget function) and SecondOne (Statelesswidget). Although I am showing a text in both, the outcome differs.

class MyApp1 extends StatelessWidget {
  final String title;
  const MyApp1({super.key,required this.title});

  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Column(
          children: [
              Text(title,style: Theme.of(context).textTheme.titleLarge),
              firstone(context),
              SecondOne(title: 'title'),                        
          ],
        ),
      ),
    );
  }

  Widget firstone(context){
    return Text(title,style: Theme.of(context).textTheme.titleLarge);
  }

}

class SecondOne extends  StatelessWidget {
  final String title;
  const SecondOne({Key? key,required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(title,style: Theme.of(context).textTheme.titleLarge);
  }
}

Although the text styles are identical in both, my output is different. I don't have to supply the title data twice when using firstone (the widget function). Which is preferable: Stateless widgets or widget functions? If I use a stateless widget, I transmit data from a stateful widget to Myapp1 stateless widget and then to a second widget. Is this correct

My Output:

Answer 1

Classes should be preferred over functions that return widgets.

It's different because you're manually passing a BuildContext which is provided above the scope of where the default ThemeData can be accessed from (is provided by MaterialApp).

class MyApp1 extends StatelessWidget {
  final String title;
  const MyApp1({super.key,required this.title});

  @override
  Widget build(BuildContext context) { // <- this BuildContext is being used
   
    return MaterialApp( // <- this widget provides the `ThemeData`, which isn't accessible from the above context
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Column(
          children: [
              Text(title,style: Theme.of(context).textTheme.titleLarge), // <- refers to the `context` provided by build above
              firstone(context), // <- refers to the `context` provided by build above
              SecondOne(title: 'title'),                        
          ],
        ),
      ),
    );
  }

  Widget firstone(context){
    return Text(title,style: Theme.of(context).textTheme.titleLarge);
  }


class SecondOne extends  StatelessWidget {
  final String title;
  const SecondOne({Key? key,required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // This uses the correct context, inherited from `MaterialApp` properly.
    return Text(title,style: Theme.of(context).textTheme.titleLarge);
  }
}

Answer 2

Please do not return MaterialApp . Direct return column in myapp1 class. It will solve your issue