Как использовать плитку расширения внутри контейнера во Flutter?

введите здесь описание изображения введите описание изображения здесь Это набор плитки расширения. Здесь я хочу деформировать плитку расширения внутри контейнера, чтобы я мог придать плитке границу, форму и тень. Также я хочу, чтобы расширенный результат был таким же, как этот. Как я могу этого добиться. Помогите, пожалуйста

Я пробовал приведенный ниже образец. Но когда я раскрываюсь, я получаю ошибку переполнения рендера.

              Container(
                  height: 80,
                  width: MediaQuery.of(context).size.width - 10,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                          color: Theme.of(context).hintColor.withOpacity(0.2),
                          spreadRadius: 2,
                          blurRadius: 5)
                    ],
                  ),
                  child:
                  ExpansionTile(
                    backgroundColor: Colors.white,
                    trailing: Icon(Icons.arrow_forward_ios_rounded),
                    initiallyExpanded: false,
                    title: Text(
                        'Messages',
                        style: Theme.of(context)
                            .textTheme
                            .subtitle),

                    children: List.generate(
                        3, (indexProduct) {
                      return Text("terwyteuwte");
                    }),
                  )
              ),

пожалуйста, помогите мне..


flutter android-studio dart flutter-layout flutter-widget
person Sana Afreen    schedule 06.11.2020    source источник
comment
@pskink thanku .... он не меняет размер контейнера динамически ... как это возможно?   -  person Sana Afreen    schedule 06.11.2020
comment
да, он меняет размер контейнера   -  person pskink    schedule 06.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать следующее. Добавьте следующие виджеты в ListView() в соответствии с вашими потребностями.

class ItemTile extends StatefulWidget {
//   final OrderItem orderItem;

//   OrderItemTile(this.title);

  @override
  _ItemTileState createState() => _ItemTileState();
}

class _ItemTileState extends State<ItemTile> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      height: _expanded
          ? 350
          : 100,
      child: Card(
        elevation: 10,
        color: Theme.of(context).canvasColor,
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Column(
          children: <Widget>[
            ListTile(
              title: (Text(
                'File',
                style: TextStyle(
                    fontSize: 22, fontWeight: FontWeight.bold),
              )),
              trailing: IconButton(
                  icon: _expanded
                      ? Icon(Icons.expand_less)
                      : Icon(Icons.expand_more),
                  onPressed: () {
                    setState(() {
                      _expanded = !_expanded;
                    });
                  }),
            ),
            AnimatedContainer(
              duration: Duration(milliseconds: 300),
              height: _expanded
                  ? 300
                  : 0,
              width: MediaQuery.of(context).size.width,
              child: ItemExpandedTile(),
            )
          ],
        ),
      ),
    );
  }
}

виджет, который отображается после раскрытия

class ItemExpandedTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Stack(
        children: <Widget>[
          Positioned(
            top: 5,
            child: Container(
              height: 90,
              width: MediaQuery.of(context).size.width - 75,
              padding: EdgeInsets.all(10),
              decoration: new BoxDecoration(
                color: Theme.of(context).canvasColor,
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    blurRadius: 15.0,
                    spreadRadius: 0.5,
                    offset: Offset(
                      1.0,
                      1.0,
                    ),
                  )
                ],
              ),
              child: Row(
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Text(
                        'Title',
                        style: TextStyle(
                            fontSize: 12, fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Результат: Список с расширением

person PRATIK PAWAR    schedule 07.11.2020