flutter 프로그레스바 progress bar circle progress bar example

 

 

https://pub.dev/packages/flutter_spinkit/example

 

 

 

flutter 기본 ProgressBar는 구글링하면 쉽게 찾을 수 있다.

 

 

위 두개의 경우 매우 간단한데 사용할땐 Stack에 넣어서 맨 상단에 쌓아주면 된다.

 

 

 

그리고 라이브러리를 가져와서 사용하는 것들이 있다.

 

flutter_spinkit 을 사용해보도록 하자. 매우 쉽고 빠르게 적용 가능하다.

 

 

 

단순 프로그레스 애니메이션인데 LIKES가 이렇게 높을 줄은 몰랐다.

 

 

 

 

먼저 pubspec.yaml에 추가해주자.

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  flutter_spinkit: ^4.1.2	//추가

dev_dependencies:
  flutter_test:
    sdk: flutter

 

 

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SpinKit Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // CircularProgressIndicator & LinearProgressIndicator
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: CircularProgressIndicator(
                  valueColor:
                      new AlwaysStoppedAnimation<Color>(Colors.blue[100]),
                  backgroundColor: Colors.blue[600],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: LinearProgressIndicator(
                  valueColor:
                      new AlwaysStoppedAnimation<Color>(Colors.blue[100]),
                  backgroundColor: Colors.blue[600],
                  value: 0.40,
                ),
              ),
              Positioned.fill(
                child: Center(
                  child: WorkSpace(),
                ),
              ),
              Align(
                child: LayoutBuilder(
                  builder: (context, _) {
                    return IconButton(
                      icon: Icon(Icons.play_circle_filled),
                      iconSize: 50.0,
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute<void>(
                            builder: (BuildContext context) => ShowCase(),
                            fullscreenDialog: true,
                          ),
                        );
                      },
                    );
                  },
                ),
                alignment: Alignment.bottomCenter,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ShowCase extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        title: Text("SpinKit", style: TextStyle(fontSize: 24.0)),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 32.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitRotatingCircle(color: Colors.white),
                const SpinKitRotatingPlain(color: Colors.white),
                const SpinKitChasingDots(color: Colors.white),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitPumpingHeart(color: Colors.white),
                const SpinKitPulse(color: Colors.white),
                const SpinKitDoubleBounce(color: Colors.white),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitWave(
                    color: Colors.white, type: SpinKitWaveType.start),
                const SpinKitWave(
                    color: Colors.white, type: SpinKitWaveType.center),
                const SpinKitWave(
                    color: Colors.white, type: SpinKitWaveType.end),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitThreeBounce(color: Colors.white),
                const SpinKitWanderingCubes(color: Colors.white),
                const SpinKitWanderingCubes(
                    color: Colors.white, shape: BoxShape.circle),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitCircle(color: Colors.white),
                const SpinKitFadingFour(color: Colors.white),
                const SpinKitFadingFour(
                    color: Colors.white, shape: BoxShape.rectangle),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitFadingCube(color: Colors.white),
                const SpinKitCubeGrid(size: 51.0, color: Colors.white),
                const SpinKitFoldingCube(color: Colors.white),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitRing(color: Colors.white),
                const SpinKitDualRing(color: Colors.white),
                const SpinKitRipple(color: Colors.white),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitFadingGrid(color: Colors.white),
                const SpinKitFadingGrid(
                    color: Colors.white, shape: BoxShape.rectangle),
                const SpinKitSquareCircle(color: Colors.white),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitSpinningCircle(color: Colors.white),
                const SpinKitSpinningCircle(
                    color: Colors.white, shape: BoxShape.rectangle),
                const SpinKitFadingCircle(color: Colors.white),
              ],
            ),
            const SizedBox(height: 48.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const SpinKitHourGlass(color: Colors.white),
                const SpinKitPouringHourglass(color: Colors.white),
              ],
            ),
            const SizedBox(height: 64.0),
          ],
        ),
      ),
    );
  }
}

class WorkSpace extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      width: 80.0,
      height: 80.0,
      child: SpinKitFadingCircle(
        itemBuilder: (_, int index) {
          return DecoratedBox(
            decoration: BoxDecoration(
              color: index.isEven ? Colors.red : Colors.green,
            ),
          );
        },
        size: 60.0,
      ),
    );
  }
}