How to view list of objects as widgets? - flutter

Question

So i have a list of objects with different block_type such as title or text. This what i show in the app:
This is the code :
class AppView extends StatefulWidget {
final List tappedItems;
const AppView({Key? key, required this.tappedItems}) : super(key: key);
#override
_AppViewState createState() => _AppViewState();
}
class _AppViewState extends State<AppView> {
final _scaffoldKey = GlobalKey<ScaffoldState>();
final List listOfItems = [
{"block_type": "title", "block_data": "Books"},
{"block_type": "text", "block_data": "This is the textblock of books"},
{"block_type": "title", "block_data": "Publishers"},
{"block_type": "text", "block_data": "This is the textblock of publishers"},
];
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
key: _scaffoldKey,
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
leading: IconButton(
icon: const Icon(Icons.menu,
size: 40), // change this size and style
onPressed: () => _scaffoldKey.currentState?.openDrawer(),
),
actions: const [
Padding(
padding: EdgeInsets.fromLTRB(5, 20, 80, 5),
)
],
pinned: false,
expandedHeight: 100,
toolbarHeight: 100,
snap: true,
floating: true,
flexibleSpace: FlexibleSpaceBar(),
),
const SliverToBoxAdapter(),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text(
jsonEncode(listOfItems),
style: TextStyle(fontSize: 40, color: Colors.black),
),
);
},
childCount: 1,
),
),
],
),
drawer: const AppMenu(),
),
);
}
}
I also have different widgets for the blocks TitleBlock and TextBlock. This is an example for TitleBlock:
import 'package:flutter/cupertino.dart';
class TitleBlock extends StatefulWidget {
const TitleBlock({Key? key}) : super(key: key);
#override
_TitleBlockState createState() => _TitleBlockState();
}
class _TitleBlockState extends State<TitleBlock> {
#override
Widget build(BuildContext context) {
return Container();
}
}
I want show these seperate block widgets such as TitleBlock and TextBlock based on the block_type of the list of objects. I want to loop through the objects because this list of objects i showed is just an example. In my use case i can have different list of objects.
I want to show the blocks TitleBlock and TextBlock like this:

Answer 1

SliverChildBuilderDelegate gives you access to the builder, just like ListView.builder
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(
title: Text(listOfItems[index]['block_type']),
subtitle: Text(listOfItems[index]['block_data']),
);
},
childCount: listOfItems.length
),
),

Answer 2

Based on your object's block_type you can call in different widgets with a ternary operator like in place of you ListTile, you can use the following,
listOfItems[index]["block_type"] == "title" ? TitleBlock(listOfItems[index]) : TextBlock(listOfItems[index])
And you can use the object i.e., Map<String, String> in the StatefulWidget (TitleBlock or TextBlock) to add any further info like,
class TitleBlock extends StatefulWidget {
const TitleBlock({Key? key, required this.dataMap}) : super(key: key);
final Map<String, String> dataMap;
#override
_TitleBlockState createState() => _TitleBlockState();
}
class _TitleBlockState extends State<TitleBlock> {
#override
Widget build(BuildContext context) {
return ListTile(
title: Text(widget.dataMap["block_type"]),
subtitle: Text(widget.dataMap["block_data"]),
);
}
}
class TextBlock extends StatefulWidget {
const TextBlock({Key? key, required this.dataMap}) : super(key: key);
final Map<String, String> dataMap;
#override
_TextBlockState createState() => _TextBlockState();
}
class _TextBlockState extends State<TextBlock> {
#override
Widget build(BuildContext context) {
return ListTile(
title: Text(widget.dataMap["block_type"]),
subtitle: Text(widget.dataMap["block_data"]),
);
}
}