flutter loading indicator

How to create flutter loading indicator?

by


Flutter provides several built-in widgets that can be used to create a loading indicator or progress bar. In this example, we will create a simple loading indicator using the CircularProgressIndicator widget.

  • First, create a new Flutter project in your preferred IDE or text editor.
  • In the main.dart file, create a stateful widget that will contain the CircularProgressIndicator widget:
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  bool _isLoading = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Loading Indicator'),
        ),
        body: Center(
          child: _isLoading ? CircularProgressIndicator() : Text('Data loaded'),
        ),
      ),
    );
  }
}

In this code, we define a boolean variable called _isLoading which is set to true by default. We use this variable to control the display of the CircularProgressIndicator widget. If _isLoading is true, the CircularProgressIndicator will be displayed, and if it is false, the text ‘Data loaded’ will be displayed.

  • Next, we need to simulate a loading process by using a Timer. In the initState method of the stateful widget, add the following code:
@override
void initState() {
  super.initState();
  Timer(Duration(seconds: 5), () {
    setState(() {
      _isLoading = false;
    });
  });
}

n this code, we use the Timer class to simulate a 5-second loading process. Once the timer expires, we call the setState method to update the state of the widget and set _isLoading to false. This will cause the CircularProgressIndicator to disappear and the ‘Data loaded’ text to be displayed.

Read also, Flutter Slider Widget Example.

  • Finally, run the app and you should see the CircularProgressIndicator widget displayed for 5 seconds, after which the ‘Data loaded’ text will be displayed.

In summary, creating a loading indicator in Flutter is a simple process that can be accomplished using built-in widgets like CircularProgressIndicator.

By simulating a loading process with a Timer and using the setState method to update the widget’s state, we can create a loading indicator that enhances the user experience of our app.

Flutter webview loading indicator

Flutter provides a WebView widget that can be used to display web content inside a Flutter application. When loading a web page or navigating between pages, it’s helpful to show a loading indicator to let the user know that the content is still loading. In this example, I’ll show you how to implement a loading indicator for a Flutter WebView.

First, you’ll need to add the webview_flutter dependency to your pubspec.yaml file:

dependencies:
  webview_flutter: ^3.0.0

Then, import the webview_flutter package in your Dart file:

import 'package:webview_flutter/webview_flutter.dart';

Next, create a stateful widget that will hold the WebView widget and the loading indicator. In the _WebViewScreenState class, add a boolean isLoading variable that will keep track of whether the web content is loading or not.

class _WebViewScreenState extends State<WebViewScreen> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          WebView(
            initialUrl: widget.url,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
            onPageFinished: (String url) {
              setState(() {
                isLoading = false;
              });
            },
          ),
          if (isLoading)
            Container(
              color: Colors.white,
              child: Center(
                child: CircularProgressIndicator(),
              ),
            ),
        ],
      ),
    );
  }
}

Finally, create an instance of the WebViewScreen widget and pass in the title and URL of the web page to be displayed:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Example',
      home: WebViewScreen(
        title: 'Flutter WebView Example',
        url: 'https://www.example.com',
      ),
    );
  }
}

Leave a Comment