Reusuable Stateless Widgets - flutter

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