Flutter Listivew hashtags show more issue - flutter

Question

Is it possible to do with flutter?
lot of hashtags came from database. If hashtags length more than 3, that time +10more button there, while we click the button. It will expanded to show all the hashtags. Kindly check my two image, you will get an idea.
First Image
first image
Second Image
second image

Answer 1

Yes, it's possible!
Here is a simple example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> _hashtags = ["Flutter", "Dart", "Google"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.grey,
height: 50,
child: ListView.builder(
itemCount: _hashtags.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(3.0),
child: Text("#${_hashtags[index]}"),
);
},
),
),
],
),
),
);
}
}
Interactive example
Output example:

Answer 2

You can acheive that by doing this
RichText(
text: TextSpan(
children: controller.hashtagList.value
.map((e) => WidgetSpan(
style: GoogleFonts.quicksand(
color: Colors.blue, fontSize: 16),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'#${e.hashtag}',
),
),
),
)))
.toList()))