circular spinner flutter code example

Example 1: flutter circular container

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

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 <String> spinnerItems = [
    'One', 
    'Two', 
    'Three', 
    'Four', 
    'Five'
    ] ;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child :
        Column(children: <Widget>[
 
          DropdownButton<String>(
            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<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
          
          Text('Selected Item = ' + '$dropdownValue', 
          style: TextStyle
              (fontSize: 22, 
              color: Colors.black)),
          ]),
      ),
    );
  }
}

Tags:

Misc Example