multi type list View in Flutter

user_19390562 0
Viewed 123

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%3a%2f%2fmedia1.santabanta.com%2ffull1%2fAnimals%2fHorses%2fhorses-62a.jpg&ehk=o%2fS9l8DSJtUbl%2bYcrwLMJy6W4MfUby7bTUHRwJu7a%2bU%3d&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'),
        ],
      ),
    ),
  );
flutter listview
3 Answers

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) => _chats[index].isOnlyText
    ? onlyText()
    : imageWithText(),

Below is the result of the 1st snippet above:

Screenshot

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        SizedBox(height: 5),
        Expanded(
          child: ListView.separated(
            shrinkWrap: true,
            itemBuilder: (context, index) =>
                index == 0 ? onlyText() : imageWithText(),
            separatorBuilder: (context, index) => SizedBox(height: 10),
            itemCount: 100,
          ),
        ),
      ],
    ),
  );
}
user_28283410 
  ///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,
  );
user_187495560

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(),
user_84126760
Related