Flutter에서 바닥으로 슬라이딩 애니메이션을 만드는 방법은 무엇입니까?

Bottom Navigation Bar은 항상 모바일 응용 프로그램의 맨 아래에 있으며 모바일 응용 프로그램의 보기 간 탐색을 제공합니다. 각 하단 탐색 모음 항목은 응용 프로그램의 다른 하위 화면 또는 기능을 나타냅니다. 따라서 이 기사에서는 Flutter에서 아래쪽으로 슬라이딩 애니메이션을 만드는 방법을 살펴보겠습니다.

Flutter에서 바닥으로 슬라이딩 애니메이션을 만드는 방법은 무엇입니까?

지표에 대한 슬라이딩 애니메이션을 만들려면 SlideTransition Widget 을 사용하는 것이 좋습니다. 기존 코드에 통합하는 데 많은 작업이 필요하지 않습니다.

아래 코드는 SlideTransition의 최소 예를 보여줍니다. 한 화면에서 다른 화면으로 이동하는 동안 계속 표시하려면 네비게이터 위의 레이어에 그려야 합니다.

아래와 같은 코드 조각을 고려하십시오.

 createState() => HomeState();
}

class HomeState extends State with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation offset;

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

    controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));

    offset = Tween(begin: Offset.zero, end: const Offset(0.0, 1.0))
        .animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Animation Example")),
      body: Stack(
        children: [
          Center(
            child: RaisedButton(
              child: const Text('Show / Hide'),
              onPressed: () {
                switch (controller.status) {
                  case AnimationStatus.completed:
                    controller.reverse();
                    break;
                  case AnimationStatus.dismissed:
                    controller.forward();
                    break;
                  default:
                }
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: SlideTransition(
              position: offset,
              child: const Padding(
                padding: EdgeInsets.all(70.0),
                child: CircularProgressIndicator(),
              ),
            ),
          )
        ],
      ),
    );
  }
}

위의 코드는 아래와 같은 출력을 제공합니다.

산출

결론:

더 나은 서비스를 제공할 수 있도록 제안/피드백을 남겨주세요.

FlutterAgency.com은 가장 인기 있는 Flutter 기술 전용 온라인 포털 중 하나이며 매일 수천 명의 고유 방문자가 Flutter에 대한 지식을 향상시키기 위해 이 포털을 방문합니다.