Home > Mobile >  How can i make multiple text so that it can show 3 data in a block in flutter?
How can i make multiple text so that it can show 3 data in a block in flutter?

Time:07-08

I want to show three data block of column, that is include date, title, and content. How can i do it? I only show 1 data that's title main.dart

Here's my code

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView(
          children: <Widget>[
            Card(child: ListTile(title: Text('One-line ListTile'))),
            Card(
              child: ListTile(
                title: Text(listBlog[index].title),
                subtitle: Text(listBlog[index].content),
                trailing: Text(listBlog[index].date),
              ),
            ),
          ],
        )

        // ListView.separated(
        //     itemBuilder: (context, index) {
        //       return ListTile(
        //         title: Text(listBlog[index].title),
        //         trailing: Text(listBlog[index].date),
        //         subtitle: Text(listBlog[index].date),
        //       );
        //     },
        //     separatorBuilder: (context, index) {
        //       return Divider();
        //     },
        //     itemCount: listBlog.length),
        );
  }
}

CodePudding user response:

You can use Column widget. Three Text will be the child of the Column.

Column(
   children: const <Widget>[
    Text(...),
    Text(...),
    Text(...)                            
   ])

Code looked like this:

ListView.separated(
        separatorBuilder: (context, index) =>
            Divider(height: 1, color: Colors.grey),
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: listBlog.length,
        itemBuilder: (context, index) {
          return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                 listBlog[index].title,
                ), Text(
                 listBlog[index].content,
                ), Text(
                 listBlog[index].date,
                )
              ]);
        });
  • Related