How to display loading widget until the main widget is loaded in flutter?

Question

I have a widget with a lot of contents like image, text and more, which make it heavy widget in flutter app, But when the app is navigated to the widget having the complex widget the app faces the jank since the widget is too large to load at an instant,

I want to show simple lite loading widget until the original widget is loaded thus removing the jank from the app and enable lazy loading of the widget,

How to achieve this in flutter?

EDIT:- To make it clear, I am not loading any data from the Internet, and this is not causing the delay. For Loading the data from Internet we have FutureBuilder. Here my widget is itself heavy such that it takes some time to load.

How to display loading Widget while the main widget is being loaded.

Check this: https://stackoverflow.com/questions/49466556/flutter-run-method-on-widget-build-complete — Mobina, Jul 30 '20 at 09:17
did you fix it? I am facing the same issue it would be nice if you have — bihire boris, Nov 29 '20 at 03:01
@bihire boris. you have to use the placeholder widget and navigate to the widget and after animation is complete then load and update the required widget. — rahul Kushwaha, Nov 29 '20 at 06:23

Suthura Sudharaka · Answer 1 · 2020-07-30T16:33:24.977

First you have to create a variable to keep the state

bool isLoading = true; //this can be declared outside the class

then you can return the loading widget or any other widget according to this variable

return isLoading ? 
  CircularProgressIndicator() //loading widget goes here
  : Scaffold() //otherwidget goes here

you can change between these two states using setState method

Once your data is loaded use the below code

setState(() {
        isLoading = false;
      });

Sample Code

class SampleClass extends StatefulWidget {
  SampleClass({Key key}) : super(key: key);

  @override
  _SampleClassState createState() => _SampleClassState();
}

bool isLoading = true; // variable to check state

class _SampleClassState extends State<SampleClass> {
  loadData() {
    //somecode to load data
    setState(() {
      isLoading = false;//setting state to false after data loaded
    });
  }

  @override
  void initState() {
    loadData(); //call load data on start
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: isLoading ? //check loadind status
      CircularProgressIndicator() //if true
      :Container(), //if false
    );
  }
}

can you give an example with parent and child widget? – rahul Kushwaha Jul 30 '20 at 10:01 — rahul Kushwaha, Jul 30 '20 at 10:01
@rahulKushwaha Updated with sample – Suthura Sudharaka Jul 30 '20 at 16:33 — Suthura Sudharaka, Jul 30 '20 at 16:33

score 3 · Answer 2 · answered Jul 30 '20 at 12:54

This is a perfect place to use a FutureBuilder.

Widget loadingWidget = ...;

Future<Widget> buildHeavyWidget() async {
  // build and return heavy widget
}

FutureBuilder(
  future: buildHeavyWidget(),
  builder: (context, snapshot) {
    if(snapshot.hasData) {
      // after the future is completed
      // the heavy widget is availabe as snapshot.data
      return snapshot.data;
    }
    return loadingWidget;
  },
)

score 0 · Answer 3 · answered Jul 30 '20 at 10:57

0

First define a bool value.

bool isLoading = false;

In your function.

yourfunction(){
setState(){
 isLoading = true;
 }

 setState(){
 isLoading = false;
 }
}

In your widget.

isLoading?CircularProgressIndicator():Widget()

answered Jul 30 '20 at 10:57

S.R Keshav

1,965
1
11
14

How to display loading widget until the main widget is loaded in flutter?

3 Answers3