multi type list View in Flutter-CodePudding

How I can display list View with multi-type for example(item 1: text, item 2: image with Text ...) using flutter?

Here is the code: I need to make the ListView show onlyText in item1, imageWithText for item2 and so on, How I can do that?

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        SizedBox(height: 5),
        ListView.separated(
          shrinkWrap: true,
          itemBuilder: (context, index) => onlyText(),
          separatorBuilder: (context, index) => SizedBox(height: 10),
          itemCount: 100,
        ),
      ],
    ),
  );
}
}

Widget imageWithText() => Container(
    child: Card(
      child: Row(
        children: [
          Text(
            'sara ahmad',
            style: TextStyle(fontSize: 16),
          ),
          SizedBox(width: 10),
          Image.network(
            'https://th.bing.com/th/id/R.e3a5da5209f4c39f1899456c94371a6f?rik=mz9sVBWxRJKGgA&riu=http://media1.santabanta.com/full1/Animals/Horses/horses-62a.jpg&ehk=o/S9l8DSJtUbl+YcrwLMJy6W4MfUby7bTUHRwJu7a+U=&risl=&pid=ImgRaw&r=0',
            width: 100,
            height: 100,
          ),
        ],
      ),
    ),
  );
Widget onlyText() => Container(
    child: Card(
      child: Row(
        children: [
          Text(
            'sara ahmad',
            style: TextStyle(fontSize: 16),
          ),
          SizedBox(width: 10),
          Text('Nour'),
        ],
      ),
    ),
  );

CodePudding user response：

  ///crete an empty widget list
List<Widget> item_list=[];
  ///create a function to add data to list and call this function in the initstate
  add_items_to_list()async{
    item_list.add(Text(('data')));
    item_list.add(Image.asset('name'));
    ///add as much as you want
  }
  
  ///use widget as below
  Widget items()=>ListView(
    children: item_list,
  );

CodePudding user response：

In the itemBuilder you can check if the item is only text or image with text with a ternary operator ?:, i.e. condition ? expr1 : expr2, like so:

itemBuilder: (context, index) => index == 0 ? onlyText() : imageWithText(),

Or, if you have a list of more than 2 items it could be something like this (assuming the items have a property bool isOnlyText):

itemBuilder: (context, index) => _items[index].isOnlyText
    ? onlyText()
    : imageWithText(),

Anyway, if you actually have only 2 items, I'd recommend using a Column instead of a ListView for the items. They even look predefined/static.

CodePudding user response：

if you want to show static list, you can do like this

itemBuilder: (context, index) => index.isEven
    ? onlyText()
    : imageWithText(),

or you have dynamic data then follow below

let's assume you have list of Model class like this

class Model{
 String text,
 String img,
}

var list = <Model>[]; //your data will be here

and to check if is there only image, you need condition like below, so in your ListView you can check like this

itemBuilder: (context, index) => list[index].img == null
    ? onlyText()
    : imageWithText(),