마지막으로 한번 설치를 해볼까요?[3 선!]

개시하다

시청해 주셔서 감사합니다.난 건이야.
이번에는 "앱이 조금만 더 있으면 완성된다!"가끔 이루고 싶은 세 가지를 소개합니다.
개인 앱 제작 등을 꼭 참고하세요.
자기도 이런 거 쓰잖아!만약 이런 물건이 있다면, 나에게 메시지를 남길 수 있다면, 나는 매우 기쁠 것이다!

1. Haptic Feedback

첫 번째는 Haptic Feedback입니다.이것은 어떤 기능으로 스마트폰을 진동시킬 수 있습니까!설치는 간단하지만 가볍게 볼 게 없다고 생각해서 소개할게요.그렇다면 이걸 소개하려고 기사를 썼다고 해도 과언이 아니다.응용 프로그램에 맞추어 중요한 곳에서 사용하는 것이 좋다.
!
simultator나 emulator는 진동하지 않습니다. 실제 기구로 확인하십시오.

사용법

우선 파일에 다음 내용을 추가해서 가져옵니다.

import 'package:flutter/services.dart';

그리고 진동하고 싶은 곳에 추가HapticFeedback.mediumImpact();.

  void _mediumHaptic() {
    setState(() {
      HapticFeedback.mediumImpact(); // ココ！
    });
  }

android라면 android/app/src/main/AndroidManifest.xml에 다음 문장을 추가하십시오.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ダミー">
    <!-- haptic feedbackの権限要求(ココ！) -->
    <uses-permission android:name="android.permission.VIBRATE" /> 

보충: mediumImpact 이외의 방법으로는 heavyImpact,lightImpact,vibrate,selectionClickplay(연속진동)이 있다.

2. Confetti

두 번째는 Confetti입니다.간단하게 종이의 폭풍설을 추가했다고 합니다.사용자가 즐거운 동작을 할 때 종이로 눈을 불면 좋은 사용자 체험을 할 수 있다.이것은 포장을 사용하기 때문에 간단하게 실현할 수 있습니다!

!
다음 코드의gif입니다.

사용법

일단 추가 포장!
https://pub.dev/packages/confetti
다음은 종이로 눈을 불고 싶은 화면에 코드를 쓴다.우선 controller가 눈보라를 일으키고 싶은 곳ConfettiWidget 방법을 추가합니다.controller의 매개 변수에 눈을 부는 시간을 넣으세요.
그럼 눈보라가 오고 싶은 데서 불러줄게.Align 나는 작은 프로그램으로 위치를 지정하는 것이 비교적 좋다고 생각한다.

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final _controller = ConfettiController(duration: const Duration(seconds: 5)); // ココ！

  void _confettiEvent() {
    setState(() {
      _controller.play(); // ココ！
    });
  }

  void _functionA() {
    Future.
  }

  @override
  void dispose() {
    _controller.dispose(); // controllerを破棄する
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('タイトル'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            Center(
              child: Column(
                children: <Widget>[
                  Text(
                    _centerText,
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  ElevatedButton(
                    onPressed: _confettiEvent, // ココで紙吹雪を呼び出し
                    child: const Text('Push here!'),
                  ),
                ],
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: ConfettiWidget(
                confettiController: _controller,
                blastDirection: pi / 2, // 紙吹雪を出す方向(この場合画面上に向けて発射)
                emissionFrequency: 0.1, // 発射頻度(数が小さいほど紙と紙の間隔が狭くなる)
                minBlastForce: 5, // 紙吹雪の出る瞬間の5フレーム分の速度の最小
                maxBlastForce: 20, // 紙吹雪の出る瞬間の5フレーム分の速度の最大(数が大きほど紙吹雪は遠くに飛んでいきます。)
                numberOfParticles: 10, // 1秒あたりの紙の枚数
                gravity: 0.1, // 紙の落ちる速さ(0~1で0だとちょーゆっくり)
                colors: const <Color>[ // 紙吹雪の色指定
                  Colors.red,
                  Colors.blue,
                  Constants.green,
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

다른 ConfettiWidget 매개 변수를 염두에 두고 있는 사람은 아래 기사에 동영상을 첨부하여 해설을 할 것이니 꼭 보십시오.
https://blog.dalt.me/2478

3. Percent Indicator

기본 표시기가 아니라 진도를 표시하는 표시기를 사용해 보세요!중처리를 할 때 너에게 부담을 주는 것은 매우 좋은 일이다.그냥 가까스로 진행이 됐으면 좋겠어요!사용자가 잠재적으로 생각하는 것은?따라서 진도에 맞는 지시기를 사용해 보는 것은 어떨까?여기도 포장이 있어서 금방 만들 수 있어서 편리해요.
엔화 외에도 직선 등 다양한 것들이 있으니 시도해 보세요!

사용법

일단 추가 포장!
https://pub.dev/packages/percent_indicator
상태 관리?StatefulWidget으로 먼저 작성합니다.사용된 상태 관리 방법에 따라 사용하세요.
Stateful Widget도 더 예쁜 글씨 쓰는 방법이 있을 것 같아서 설치할 때 잘 조정하세요.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = false;

  double _loadingCounter = 0; // この値を変化させていく

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  // 時間のかかる処理
  void bigFunction() async {
    // ここでローディング開始
    setState(() {
      _loadingCounter = 0;
      isLoading = true;
    });
    setState(() {
      _loadingCounter = 0.1; 
    });
    await functionA();
    setState(() {
      _loadingCounter = 0.3; // 処理が終わるごとに_loadingCounterの値を大きくしていく
    });
    await functionB();
    setState(() {
      _loadingCounter = 0.7;
    });
    await functionC();
    setState(() {
      _loadingCounter = 1;
    });
    await functionLast();
    setState(() {
      isLoading = false;
    });
  }

  // 適当な処理A
  Future<void> functionA() async {
    await Future.delayed(const Duration(seconds: 1));
  }

  // 適当な処理B
  Future<void> functionB() async {
    await Future.delayed(const Duration(seconds: 1));
  }

  // 適当な処理C
  Future<void> functionC() async {
    await Future.delayed(const Duration(seconds: 1));
  }

  // 最後インジケータが一周するように微調整
  Future<void> functionLast() async {
    await Future.delayed(const Duration(milliseconds: 500));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: <Color>[
                  Colors.white,
                  Colors.greenAccent,
                ],
              ),
            ),
            child: Center(
              child: !isLoading ? Stack(
                // mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  if (!isLoading)
                  Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        ElevatedButton(
                          onPressed: () async {
                            bigFunction(); // ここで関数を呼び出してます。
                          },
                          child: const Text('Hey! Push!!'),
                        ),
                      ],
                    ),
                  ),
                ],
              ) : Center(
              child: CircularPercentIndicator( // ここの引数でデザインを変更することもできます。
                progressColor: Colors.green,
                animateFromLastPercent: true,
                animation: true,
                radius: 50,
                percent: _loadingCounter,
              ),
            )
            ),
          ),            
        ],
      ),
    );
  }
}

총결산

어때요?
하나라도 "이거 쓸 수 있을 것 같아!"여러분들이 그렇게 생각하시면 정말 기쁠 거예요!