Make a image visible instead of text for a particular time - flutter

Question

I have built a chatbot using flutter and DialogueFlow I wanted to add a loading animation before the bot answers the question .
I have already made the loading animation but i am not able to show both, the text and the loading image.
class ChatMessage extends StatelessWidget {
ChatMessage({this.text, this.name, this.type});
final String text;
final String name;
final bool type;
List<Widget> botMessage(context) {
return <Widget>[
Container(
margin: const EdgeInsets.only(right: 16.0),
child: CircleAvatar(child: Image(
image:
NetworkImage('https://cdn3.iconfinder.com/data/icons/customer-support-
7/32/40_robot_bot_customer_help_support_automatic_reply-512.png'),
)
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(this.name,
style: TextStyle(fontWeight: FontWeight.bold)),
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(text),
),
],
),
),
];
}
List<Widget> loader(context) {
return <Widget>[
Container(
margin: const EdgeInsets.only(right: 16.0),
child: CircleAvatar(child: Image(
image:
NetworkImage('https://cdn3.iconfinder.com/data/icons/customer-support-
7/32/40_robot_bot_customer_help_support_automatic_reply-512.png'),
)
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(this.name,
style: TextStyle(fontWeight: FontWeight.bold)),
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Image(
image: AssetImage('assets/loader.gif'),
width: 25,
height: 25,
),
),
],
),
),
];
}
List<Widget> myMessage(context) {
return <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(this.name, style: Theme.of(context).textTheme.subhead),
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(text),
),
],
),
),
Container(
margin: const EdgeInsets.only(left: 16.0),
child: CircleAvatar(
child: Text(
this.name[0],
style: TextStyle(fontWeight: FontWeight.bold),
)),
),
];
}
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: this.type ? myMessage(context) : botMessage(context),
),
);
}
}
I have just put loader instead of the botMessage in the last line of the code but how can i just show the loader for 5 seconds or so.
Mainly i want the loading animation like Google Assistant.

Answer 1

There are two ways to do what you want to do.
Create the object with a Boolean flag which is updated to true when data is received and using this flag as condition switch between text & loader widgets.
Use a futurebuilder widget & in future parameter use Future.delay with 5 seconds duration which is returning some value like 1 or true. Then inside the builder of futurebuilder check of snapshot has data. If snapshot don't have data, just show your loader else show your text.
See this video of futurebuilder to understand how it works.
https://youtu.be/ek8ZPdWj4Qo
Edited as #Maadhav asking for code,
Here is a little snippet which might help you.
FutureBuilder(
future: Future.delayed(Duration(seconds: 5), () => true),
builder: (context, snapshot){
if(!snapshot.hasData)
return CircularProgressIndicator();
return Text("Yay");
}
)
Here this FutureBuilder should be the container of your reply bubble in which you can return Text or any other widget according to your need.
For demo click here

Answer 2

The following can be used:
Future.delay(Duration(seconds: 5), () { });