android – Why Raw text is shown while switching between two pages in Flutter using Hero()

GIF

How can i fix that. I want to make it smooth transformation but it shows raw text while transfering between two pages. i used Hero widget as follow

// craw card and route endpoint -----------------------------------------------

class CrawRoute extends StatelessWidget {
  const CrawRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:  Row(
          children: [
            Hero(tag: "craw", child: Image.asset(height: 60,width:50,fit:BoxFit.cover,'assets/images/craw.png')),
            const Text('කපුටු හැඩලීම හා වසුරුකිරීම'),
          ],
        ),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            SizedBox(height: 50,),
            CrawDevideWidget(lableText: "කපුටන් හැඩලීම",tagTextCrawDevide: "hadala",route: hadalaRoute(),),
            SizedBox(height: 50,),
            CrawDevideWidget(lableText: "කපුටන් වසුරුකිරීම",tagTextCrawDevide: "wasuru",route: wasuruRoute(),),
            SizedBox(height: 50,),
          ],
        ),
      ),
    );
  }
}

class CrawDevideWidget extends StatelessWidget {
  const CrawDevideWidget({
    required this.lableText,
    required this.tagTextCrawDevide,
    required this.route,
    super.key,
  });
  final String lableText;
  final String tagTextCrawDevide;
  final Widget route;


  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ElevatedButton(style: ElevatedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28))),onPressed: (){
        Navigator.push(context, MaterialPageRoute(builder: (context) => route));
      }, child:  Hero(tag:tagTextCrawDevide,child: Text(lableText,style: const TextStyle(fontSize:50,color: Colors.white70),))),
    );
  }
}


class wasuruRoute extends StatelessWidget {
  const wasuruRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
           // Image.asset(width: 70,fit:BoxFit.cover,height:70,'assets/images/gecko.png',),
            const Hero(tag:"wasuru",child: Text('කපුටන් වසුරුකිරීම')),
          ],
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context) ;
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}


class hadalaRoute extends StatelessWidget {
  const hadalaRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
           // Image.asset(width: 70,fit:BoxFit.cover,height:70,'assets/images/gecko.png',),
             const Hero(tag:"hadala",child: Expanded(child: Text('කපුටන් හැඩලීම'))),
          ],
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context) ;
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

Here’s a brief explanation of the code:

The SearchListScreen class is a StatefulWidget that likely represents the main screen of the application.

Inside the SearchListScreen class, there are two methods: _filterSearchResults and build. The _filterSearchResults method is used to filter the list based on the user’s input, and the build method returns a Scaffold widget with an AppBar and a body that displays the search list.

The CrawDevideWidget class is a StatelessWidget that represents a custom widget used to display items in the search list. It contains an ElevatedButton that, when pressed, navigates to a specific route.

There are two other classes, wasuruRoute and hadalaRoute, which represent different routes in the application.

Each of these classes returns a Scaffold widget with an AppBar and a body that contains an ElevatedButton to navigate back to the previous screen.