Flutter Hero animations lags if I have long Text widget indide

Viewed 16

Here is my problem - when I use hero animation, everything works perfect until I put Text widget with long paragraph inside.

 class _MenuDetails extends StatelessWidget {
  final String index;
  final String png;
  final String title;
  final String description;
  final String longDescription;
  final String shelfLife;
  final String fatContent;
  final String storageConditions;
  final String averageWeight;

  const _MenuDetails({
    required this.index,
    required this.png,
    required this.title,
    required this.description,
    required this.longDescription,
    required this.shelfLife,
    required this.fatContent,
    required this.storageConditions,
    required this.averageWeight,
  });

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: index,
      child: Scaffold(
        backgroundColor: Colors.white,
        body: ListView(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25),
              child: Image.asset(png, fit: BoxFit.contain),
            ),
            AutoSizeText(
              title,
              maxLines: 1,
              minFontSize: 20,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontFamily: 'Quadrata',
                color: Color(0xff2C2513),
              ),
            ),
            AutoSizeText(
              description,
              maxLines: 1,
              minFontSize: 18,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontFamily: 'ArialNarrow',
                color: Color(0xff2C2513),
              ),
            ),
            const SizedBox(
              height: 20,
            ),

////////////////////////////////////This text///////////////////////////////////////////

           Text(
              longDescription,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.left,
              maxLines: 25,
              style: const TextStyle(
                  fontFamily: 'ArialNarrow',
                  color: Color(0xff2C2513),
                  fontSize: 16.0),
            ),

////////////////////////////////////This text///////////////////////////////////////////

            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
              child: Column(
                children: [
                  SizedBox(
                    height: 70,
                    child: Row(
                      children: [
                        Expanded(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              SizedBox(
                                width: 40,
                                child: Center(
                                  child: SvgPicture.asset(
                                    'assets/svg/product/ch1.svg',
                                  ),
                                ),
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              AutoSizeText(
                                "Срок хранения:\n$shelfLife",
                                minFontSize: 14,
                                textAlign: TextAlign.left,
                                style: const TextStyle(
                                  fontFamily: 'ArialNarrow',
                                  color: Color(0xff2C2513),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              SizedBox(
                                width: 40,
                                child: Center(
                                  child: SvgPicture.asset(
                                    'assets/svg/product/ch2.svg',
                                  ),
                                ),
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              AutoSizeText(
                                "Условия хранения:\n$fatContent",
                                minFontSize: 14,
                                textAlign: TextAlign.left,
                                style: const TextStyle(
                                  fontFamily: 'ArialNarrow',
                                  color: Color(0xff2C2513),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 70,
                    child: Row(
                      children: [
                        Expanded(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              SizedBox(
                                width: 40,
                                child: Center(
                                  child: SvgPicture.asset(
                                    'assets/svg/product/ch3.svg',
                                  ),
                                ),
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              AutoSizeText(
                                "Жирность:\n$storageConditions",
                                minFontSize: 14,
                                textAlign: TextAlign.left,
                                style: const TextStyle(
                                  fontFamily: 'ArialNarrow',
                                  color: Color(0xff2C2513),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              SizedBox(
                                width: 40,
                                child: Center(
                                  child: SvgPicture.asset(
                                    'assets/svg/product/ch4.svg',
                                  ),
                                ),
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              AutoSizeText(
                                "Температура хранения:\n$averageWeight",
                                minFontSize: 14,
                                textAlign: TextAlign.left,
                                style: const TextStyle(
                                  fontFamily: 'ArialNarrow',
                                  color: Color(0xff2C2513),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        bottomNavigationBar: Container(
          height: 70,
          width: double.infinity,
          color: Colors.white,
          child: Center(
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                  elevation: 0,
                  backgroundColor: const Color(0xff2C2513),
                  padding: const EdgeInsets.only(
                      left: 30, right: 30, bottom: 10, top: 9),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(40))),
              child: const AutoSizeText(
                maxLines: 1,
                minFontSize: 18,
                'НАЗАД',
                style: TextStyle(fontFamily: 'ArialNarrow'),
              ),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ),
        ),
      ),
    );
  }
}

it is visible how lines are jumping a little when hero is opening, so I believe flutter is still counting how many lines this text needs... Is there any solution?

0 Answers
Related