Flutter: How to hide or show more text within certain length

Question

My Container having a description of movies.

Initially, I want to show only a few lines of description. And below that there should be a link (more...), After Tapping more... all content of description should be get displayed.

For example, check this JQuery plugin.

Answer 1

you can do that this way

import 'package:flutter/material.dart'; import 'package:meta/meta.dart';  void main() => runApp(new MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new MaterialApp(       title: 'Flutter Demo',       home: new HomeScreen(),     );   } }  class HomeScreen extends StatelessWidget {   final String description =       "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.";    @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(         title: const Text("Demo App"),       ),       body: new Container(         child: new DescriptionTextWidget(text: description),       ),     );   } }  class DescriptionTextWidget extends StatefulWidget {   final String text;    DescriptionTextWidget({@required this.text});    @override   _DescriptionTextWidgetState createState() => new _DescriptionTextWidgetState(); }  class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {   String firstHalf;   String secondHalf;    bool flag = true;    @override   void initState() {     super.initState();      if (widget.text.length > 50) {       firstHalf = widget.text.substring(0, 50);       secondHalf = widget.text.substring(50, widget.text.length);     } else {       firstHalf = widget.text;       secondHalf = "";     }   }    @override   Widget build(BuildContext context) {     return new Container(       padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),       child: secondHalf.isEmpty           ? new Text(firstHalf)           : new Column(               children: <Widget>[                 new Text(flag ? (firstHalf + "...") : (firstHalf + secondHalf)),                 new InkWell(                   child: new Row(                     mainAxisAlignment: MainAxisAlignment.end,                     children: <Widget>[                       new Text(                         flag ? "show more" : "show less",                         style: new TextStyle(color: Colors.blue),                       ),                     ],                   ),                   onTap: () {                     setState(() {                       flag = !flag;                     });                   },                 ),               ],             ),     );   } }