Флаттер: как создать плавный выпадающий список?

Question

Я новичок в трепетании и пытаюсь составить список в раскрывающемся списке, при котором элемент плавно переключается, отображая внутренний список элемента.

Пожалуйста, проверьте прилагаемое изображение для лучшего понимания.

Ниже приведен мой стартовый код.

import 'package:flutter/material.dart';
import 'package:lpa_exam/src/api/api_manager.dart';

class Practicetest extends StatefulWidget {
  final examId;
  Practicetest({Key key, this.examId});
  @override
  _PracticetestComp createState() => _PracticetestComp();
}

class _PracticetestComp extends State<Practicetest> {
  List listofpracticetest;
  void initState() {
    super.initState();
    APIManager.getpracticetestlist(widget.examId).then((resultpracticelist) {
      setpracticetest(resultpracticelist);
    });
  }

  void setpracticetest(value) {
    setState(() {
      listofpracticetest = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xffF8FDF7),
        appBar: AppBar(
          backgroundColor: Color(0xffF8FDF7), // status bar color
          brightness: Brightness.light,
          elevation: 0.0,
          leading: Container(
            margin: EdgeInsets.only(left: 17),
            child: RawMaterialButton(
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
              child: new Icon(
                Icons.keyboard_backspace,
                color: Colors.red[900],
                size: 25.0,
              ),
              shape: new CircleBorder(),
              elevation: 4.0,
              fillColor: Colors.white,
              padding: const EdgeInsets.all(5.0),
            ),
          ),
        ),
        body: Container(
          // height: 200,
          margin: EdgeInsets.only(top: 40, left: 30, right: 30),
          child: ListView(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  ListTile(
                      dense: true,
                      contentPadding: EdgeInsets.all(0),
                      title: Text(
                        'Quick set of',
                        style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: 18,
                        ),
                      ),
                      subtitle: Text(
                        'Practice Tests',
                        style: TextStyle(
                            fontWeight: FontWeight.w700,
                            fontSize: 22,
                            color: Colors.black),
                      )),
                  Container(
                      decoration: BoxDecoration(
                          border: Border(
                        bottom: BorderSide(
                          color: Colors.grey[300],
                          width: 1.0,
                        ),
                      )),
                      margin: EdgeInsets.only(top: 30),
                      child: Container(
                        child: ListTile(
                          contentPadding: EdgeInsets.all(0),
                          leading: Text(
                            'Alegbra',
                            style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.w500),
                          ),
                          trailing: Text('1 Submitted ',
                              style: TextStyle(color: Colors.grey)),
                        ),
                      )),
                ],
              )
            ],
          ),
        ));
  }
}

PS

Итак, список, который я получу от API, в настоящее время пытается жесткий код для макета. любая ссылка или код наверняка поможет мне.

Спасибо

Answer 1

Нашли идеальное решение для требования макета.

Виджет ExpansionPanelList:

https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html

Отображать так:

Answer 2

Оберните вашего ребенка в AnimatedContainer, он сделает все остальное за вас и ознакомится с официальной документацией для получения дополнительной информации