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:

CodePudding user response：

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
       ), 
     ),

CodePudding user response：

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"]),
    );
  }
}

And accordingly can construct for TextBlock.