Need help in making a reusable widget in flutter
5,704
Solution 1
TileDate
import 'package:flutter/material.dart';
double mainTab = 150;
class TileData extends StatefulWidget {
List<Widget> widgetsList;
TileData({this.widgetsList});
@override
_TileDataState createState() => _TileDataState();
}
class _TileDataState extends State<TileData> {
@override
Widget build(BuildContext context) {
return Container(
height: 200 - 15.0,
width: mainTab - 10.0,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 15, 0, 0),
child: Column(
children: widget.widgetsList,
),
),
);
}
}
main
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:test/widgets/TileData.dart';
void main() => runApp(MaterialApp(
home: Scaffold(backgroundColor: Color(0xFF2d3447), body: MyApp()),
));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
TileData(
widgetsList: [Text("Element 1")],
),
TileData(
widgetsList: [Text("Element 2")],
),
TileData(
widgetsList: [Text("Element 3")],
)
],
);
}
}
In this way u can reuse
Solution 2
Create a property and use it as an argument in the constructor of the reusable widget.
final List<Widget> children;
TileData({this.children});
Then, in your build method, pass the property to the column.
Column(
children: widget.children
)

Author by
Ballistic Swami
Updated on December 16, 2022Comments
-
Ballistic Swami 1 minute
So I am making an app with flutter. So in the main.dart file i am making a component which is basically a bunch of widgets wrapped together. I have to use this component multiple times so I thought of making these reusable component in another dart file and then importing it in main.dart.
This is my code for reusable.dart
import 'package:flutter/material.dart'; double mainTab = 150; class TileData extends StatefulWidget { @override _TileDataState createState() => _TileDataState(); } class _TileDataState extends State<TileData> { @override Widget build(BuildContext context) { return Container( height: 200 - 15.0, width: mainTab - 10.0, child: Padding( padding: const EdgeInsets.fromLTRB(10, 15, 0, 0), child: Column( ), ), ); } }
I plan to use this TileData Widget in my main.dart in this manner
ListView( children: children: <Widget>[ TileData( children: <Widget>[ Text('Element 1'), ]), TileData( children: <Widget>[ Text('Element 2'), ]), TileData( children: <Widget>[ Text('Element 3'), ], ) ], ),
So the children of the TileData() widget are actually the children of the column which was last wrapped in the widget in reusable.dart
Is there any way I can achieve this?