androidflutterexpandable

how can i set min height to my containe and after colick on button then wrapcontent height be equal of text height


I want to show more text with set animation to container in flutter.I want to set min height to my container then set animation for expand my container. like this image https://raw.githubusercontent.com/Blogcat/Android-ExpandableTextView/master/demo.gif


Solution

  • You can copy paste run full code below
    You can use AnimatedContainer with Text overflow: TextOverflow.fade
    code snippet

    ShowMore(
              content: '...',
              desiredMaxHeight: 200.0,
              desiredMinHeight: 56.0,
            ),
    ...
    AnimatedContainer(
              duration: const Duration(milliseconds: 700),
              width: double.infinity,
              height: showStatus == ShowStatus.EXPANDED
                  ? widget.desiredMaxHeight
                  : widget.desiredMinHeight,
              child: Text(
                widget.content,
                softWrap: true,
                overflow: TextOverflow.fade,
              )),
    

    working demo

    enter image description here

    full code

    import 'package:flutter/material.dart';
    import 'package:flutter/foundation.dart';
    
    class ShowMore extends StatefulWidget {
      /// The string which will be used by Text widget
      final String content;
    
      /// The height in pixels of the largest possible size an AnimatedContainer will be
      final double desiredMaxHeight;
    
      /// The height in pixels of the smallest possible size an AnimatedContainer will be
      final double desiredMinHeight;
    
      const ShowMore(
          {Key key,
          @required this.content,
          @required this.desiredMaxHeight,
          @required this.desiredMinHeight})
          : assert(content != null),
            assert(desiredMaxHeight != null),
            assert(desiredMinHeight != null),
            super(key: key);
    
      @override
      ShowMoreState createState() => ShowMoreState();
    }
    
    class ShowMoreState extends State<ShowMore> {
      _ontap update;
      ShowStatus showStatus;
    
      void _update() {
        setState(() {
          showStatus = showStatus == ShowStatus.EXPANDED
              ? ShowStatus.UNEXPANDED
              : ShowStatus.EXPANDED;
        });
      }
    
      @override
      void initState() {
        super.initState();
        showStatus = ShowStatus.UNEXPANDED;
        update = _update;
      }
    
      @override
      Widget build(BuildContext context) {
        return Column(children: <Widget>[
          AnimatedContainer(
              duration: const Duration(milliseconds: 700),
              width: double.infinity,
              height: showStatus == ShowStatus.EXPANDED
                  ? widget.desiredMaxHeight
                  : widget.desiredMinHeight,
              child: Text(
                widget.content,
                softWrap: true,
                overflow: TextOverflow.fade,
              )),
          Container(
              width: double.infinity,
              height: 56.0,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    showStatus == ShowStatus.EXPANDED
                        ? RaisedButton(
                            onPressed: () {
                              update();
                            },
                            child: Text("COLLAPSE"))
                        : RaisedButton(
                            onPressed: () {
                              update();
                            },
                            child: Text("EXPAND")),
                  ])),
        ]);
      }
    }
    
    /// Function that is called when updating a widget
    typedef void _ontap();
    
    enum ShowStatus {
      UNEXPANDED,
      EXPANDED,
    }
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          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> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                ShowMore(
                  content:
                      'Lorem ipsum dolor sit amet, prima liberavisse cu mei, his elit fabulas ex. Ne justo dicunt referrentur eam. Eum nulla eleifend id, ex vim ferri vitae pericula, qui epicurei interpretaris te. His ei debitis habemus intellegebat, essent assentior incorrupte ne has. Has te inani option, qui eu etiam feugiat epicurei, posidonium dissentias at nam. Ne his malis probatus consequat. Purto neglegentur vim ea, et vim reque quaestio corrumpit, perfecto singulis no his. Homero minimum efficiendi vix no. Vel an adhuc debet constituam, dicant consul percipitur nam ut, pri vide dicam feugait ei. Lorem homero graeci ex nam, labitur virtute mnesarchum in mel.',
                  desiredMaxHeight: 200.0,
                  desiredMinHeight: 56.0,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        );
      }
    }