Flutter에서의 화면 전환, 제스쳐 인식 - 공부 내용

공부 내용

Flutter에서의 화면 전환, 제스쳐 인식

yeji Kim

Jul 11, 20243m

참고 자료 화면 전환 1. Navigator 2. PageRouterBuilder 제스쳐 인식 2. InkWell 3. GestureDetector

참고 자료

[flutter]플러터 화면 전환(페이지 이동)

플러터에서 Navigator를 이용한 화면 간의 이동을 알아보도록 합시다. 화면 전환 코드를 살펴보기 전에 현재 화면은 다음과 같은 상태입니다. 위 화면의 파일명은 test_screen.dart이고 소스코드는 아래와 같습니다. 단순히 스케폴드 위젯을 보여주고 있고 자식으로는 Container를 가지고 있지만 아무런 표시를 하지 않는 상태입니다. 버튼을 눌렀을 때 화면 이동을 시킬 계획이므로 아무것도 없는 화면에 버튼을 하나 만들어 보겠습니다. child 프로퍼티를 ElevatedButton 위젯을 추가했습니다. ElevatedButton 의 onPressed는 버튼을 눌렀을 때 실행되는 함수를 정의할 수 있지만, 현재는 빈 함수로 해뒀습니다. 앱에서 살펴볼까요? 버튼이 잘 만들어졌네요. 이제 버튼을 눌렀..

fronquarry.tistory.com

화면 전환

1. Navigator

// main.dart 

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키
import 'package:untitled/ScreenA.dart';

import 'ScreenB.dart';
import 'ScreenC.dart'; // 프로젝트 제목을 잡아야 함


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/', // home은 단일 initailRoute는 여러 페이지 근데 그냥 계속 쓰면 될듯
      routes: {
        '/' : (context) => ScreenA(), // 화면이동의 컨텍스트 key : value로 저장
        '/b' : (context) => ScreenB(),
        '/c' : (context) => ScreenC()
      },
    );
  }
}

import 'package:flutter/material.dart';

class ScreenA extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenA'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: () {
              Navigator.pushNamed(context, '/b'); // 우리가 route에서 지정해준 키값으로 이동해
            }, child: Text('Go to Screen B')),
            ElevatedButton(onPressed: () {
              Navigator.pushNamed(context, '/c');
            }, child: Text('Go to Screen C')),
          ],
        ),
      ),
    );
  }
}

2. PageRouterBuilder

제스쳐 인식

2. InkWell

동작을 감지했을 때 잉크가 퍼지는 듯한 애니메이션 효과를 줌.

3. GestureDetector

InkWell과는 달리 별도의 효과는 없지만 훨씬 다양한 gesture를 감지할 수 있음.

Subscribe to '아무튼-작업일지'

Welcome to '아무튼-작업일지'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to '아무튼-작업일지'!