Text Overflow appear for A fraction of second

Question

i have a HomeScreen with Listview.builder, when i click on any item inside the Listview item clicked would send me to another screen with details about that item, I'm using Hero Animation while opening another screen or widget. Now when the other screen opens it shows yellow lines below Text for a fraction of seconds then disappear. I managed to capture a Screenshot to show what happens.

return SafeArea(
  child: Scaffold(
    body: LayoutBuilder(
      builder: (p0, constraints) => Hero(
        tag: productLink,
        child: Stack(
          children: [
            Column(
              children: [
                //Main image, title, backButton
                Flexible(
                  child: Stack(
                    alignment: Alignment.bottomRight,
                    children: [
                      AspectRatio(
                        aspectRatio: 16 / 9,
                        child: Image.asset(
                          'assets/dummy/dummy-2.jpg',
                          width: double.infinity,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Align(
                        alignment: Alignment.bottomRight,
                        heightFactor: 1,
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: constraints.maxWidth * .05,
                            vertical: constraints.maxWidth * .02,
                          ),
                          child: Icon(
                            Icons.crop_free_sharp,
                            color: Colors.white.withOpacity(.7),
                            size: Sizes.SIZE_36,
                          ),
                        ),
                      ),
                      //Title
                      Align(
                        alignment: Alignment.bottomLeft,
                        heightFactor: 1,
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: constraints.maxWidth * .03,
                            vertical: constraints.maxWidth * .04,
                          ),
                          child: Text(
                            'Just an empty Adress',
                            style: TextStyle(
                              color: Colors.white.withOpacity(.7),
                              fontSize: Sizes.TEXT_SIZE_20,
                              fontFamily: 'Intel',
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Flexible(
                  child: SizedBox(
                    height: 100,
                    width: double.infinity,
                    child: Stack(
                      children: [
                        Row(
                          children: [
                            Flexible(
                              child: Image.asset(
                                'assets/dummy/dummy-3.jpg',
                                height: 100,
                                width: constraints.maxWidth / 3,
                                fit: BoxFit.cover,
                                cacheWidth: 1440,
                                cacheHeight: 810,
                              ),
                            ),
                            Flexible(
                              child: Image.asset(
                                'assets/dummy/dummy-4.jpg',
                                height: 100,
                                width: constraints.maxWidth / 3,
                                fit: BoxFit.cover,
                              ),
                            ),
                            Flexible(
                              child: Image.asset(
                                'assets/dummy/dummy-5.jpg',
                                height: 100,
                                width: constraints.maxWidth / 3,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ],
                        ),
                        GestureDetector(
                          child: Container(
                            color: Colors.black.withOpacity(0.6),
                            height: 100,
                            width: constraints.maxWidth / 3,
                            child: const Center(
                                child: Text(
                              '+16',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: Sizes.TEXT_SIZE_20,
                                fontWeight: FontWeight.bold,
                              ),
                            )),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            // BackButton
            GestureDetector(
              onTap: () => Navigator.pop(context),
              child: Padding(
                padding: EdgeInsets.symmetric(
                  horizontal: constraints.maxWidth * .05,
                  vertical: constraints.maxWidth * .02,
                ),
                child: CircleAvatar(
                  backgroundColor: Colors.grey.withOpacity(.5),
                  child: const Icon(
                    CupertinoIcons.back,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

Answer 1

The under yellow lines means it is missing Material on its parent level. You can wrap the widget with any material Widget like Card, Material, Scaffold...

   Hero(
     tag: productLink,
       child: Material(
         child: Stack(