You can use ExpansionTile instead of ExpansionPanelRadio
[Here is the output][1]
[1]: https://i.stack.imgur.com/AiNaj.png
and here is the sample code :
class FaqsScreen extends StatelessWidget {
FaqsScreen({super.key});
final List<int> _faqData = List.generate(5, (index) => index);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: _faqData
.map(
(faq) => Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10),
BoxShadow(
color: Colors.black.withOpacity(0.3),
spreadRadius: -2,
blurRadius: 5,
),
],
),
child: ExpansionTile(
title: Text('1. Lorem Ipsum is simply dummy text?'),
children: [
Divider(),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 8),
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
),
),
],
),
),
)
.toList(),
),
),
),
),
);
}
}
To do this simply add a package `readmore: ^2.1.0`.
In your .dart file import `import 'package:readmore/readmore.dart';`
Use this code to adjust automatically height of container
Container(
margin: const EdgeInsets.only(
top: 30,
left: 10,
right: 10,
bottom: 40.0,
),
color: Colors.transparent,
child: ReadMoreText(
'your_text',
trimLines: 4,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
postDataTextStyle: TextStyle(
color: Colors.blue,
),
style: TextStyle(
fontFamily: 'Avenir',
color: Colors.black,
),
trimExpandedText: 'Show less',
lessStyle: TextStyle(
fontFamily: 'Avenir',
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
moreStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
width: MediaQuery.of(context).size.width,
),
