Блог

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

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

               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");
                    }),
                  )
              ),
  

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

Вы можете сделать следующее: добавьте следующие виджеты в 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),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
  

Результат: