Sign In

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

Y
yeji Kim

참고 자료

화면 전환

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 '아무튼-작업일지'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to '아무튼-작업일지'!
Subscribe
👍