Как сделать dropdawn контейнер с текстом во флаттере

Question

Я новичок во флаттере. И я не знаю всех вайтеров от флаттера. Как сделать контейнер с текстом с надписью? Когда нажмите или нажмите кнопку, контейнер должен появиться.

Answer 1

Это будет работать отлично, проверьте это. Проверьте код ниже:

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 ExpandText(text: description),
      ),
    );
  }
}

class ExpandText extends StatefulWidget {
  final String text;

  ExpandText({@required this.text});

  @override
  _ExpandTextState createState() => new _ExpandTextState();
}

class _ExpandTextState extends State<ExpandText> {
  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(
        mainAxisAlignment: MainAxisAlignment.center,
        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;
              });
            },
          ),
        ],
      ),
    );
  }
}

Выход:

Надеюсь, это поможет.