loading spinner widget flutter code example

Example 1: flutter show loading spinner when list loading

import 'dart:async';
  import 'package:flutter/material.dart';
  
  Future fetchStr() async {
    await new Future.delayed(const Duration(seconds: 5), () {});
    return 'Hello World';
  }
  
  void main() => runApp(MyApp(str: fetchStr()));
  
  class MyApp extends StatelessWidget {
    final Future str;
    MyApp({Key key, this.str}) : super(key: key);
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Fetch Data Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Fetch Data Example'),
          ),
          body: Center(
            child: FutureBuilder(
              future: str,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(snapshot.data);
                } else if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                }
                // By default, show a loading spinner
                return CircularProgressIndicator();
              },
            ),
          ),
        ),
      );
    }
  }

Example 2: spinner in flutter

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Spinner Drop Down List in Flutter')),
        body: DropDown(),
      ),
    );
  }
}
 
class DropDown extends StatefulWidget {
  @override
  DropDownWidget createState() => DropDownWidget();
}
 
class DropDownWidget extends State {
 
  String dropdownValue = 'One';
 
  List  spinnerItems = [
    'One', 
    'Two', 
    'Three', 
    'Four', 
    'Five'
    ] ;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child :
        Column(children: [
 
          DropdownButton(
            value: dropdownValue,
            icon: Icon(Icons.arrow_drop_down),
            iconSize: 24,
            elevation: 16,
            style: TextStyle(color: Colors.red, fontSize: 18),
            underline: Container(
              height: 2,
              color: Colors.deepPurpleAccent,
            ),
            onChanged: (String data) {
              setState(() {
                dropdownValue = data;
              });
            },
            items: spinnerItems.map>((String value) {
              return DropdownMenuItem(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
          
          Text('Selected Item = ' + '$dropdownValue', 
          style: TextStyle
              (fontSize: 22, 
              color: Colors.black)),
          ]),
      ),
    );
  }
}