[Flutter] Clone - 당근마켓25(InputScreen)

이번에는 새로운 스크린 추가 및 라우팅 추가에 대해 구현해보겠습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

 

 

 

초기 화면은 아래와 같습니다. 

 

 

 

 

새로운 페이지가 추가되면 getPages() 에 해당 정보를 추가해주면 된다.

 

./src/router/locations.dart

 

GetPage(
  name: '/input',
  page: () => const InputScreen(),
  transition: Transition.fadeIn,
  middlewares: [CheckAuth()], // 미들웨어를 먼저 확인(로그인 여부 확인)하고 "page:" 로 이동함
),

 

 

 

./src/screens/home/home_screen.dart - 새로운 화면으로 이동하는 Get.toNamed() 추가

 

 

floatingActionButton: ExpandableFab(
  // distance between button and children,
  distance: 90,
  children: <Widget>[
    MaterialButton(
      onPressed: () {
        Get.toNamed('/input');
      },
      shape: const CircleBorder(),
      height: 48,
      color: Theme.of(context).colorScheme.primary,
      child: const Icon(Icons.edit),
    ),

 

 

 

./src/screens/input/input_screen.dart 신규 생성

 

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  _InputScreenState createState() => _InputScreenState();
}

class _InputScreenState extends State<InputScreen> {
  bool isCreatingItem = false;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        Size _size = MediaQuery.of(context).size;

        return IgnorePointer(
          ignoring: isCreatingItem,
          child: Scaffold(
            appBar: AppBar(
              centerTitle: true,
              // leading 을 통해서 back 버튼을 "뒤로" 버튼으로 대체할 수 있음.
              leading: TextButton(
                onPressed: () {
                  debugPrint('뒤로가기 버튼 클릭');
                  Get.back();
                },
                style: TextButton.styleFrom(
                  primary: Colors.black,
                  // backgroundColor 는 기본으로 흰색으로 설정되어 있음,
                  backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
                ),
                child: Text(
                  '뒤로',
                  style: Theme.of(context).textTheme.bodyText1,
                ),
              ),
              bottom: PreferredSize(
                preferredSize: Size(_size.width, 2),
                child: isCreatingItem? const LinearProgressIndicator(minHeight: 2,) : Container(),
              ),
              actions: <Widget>[
                TextButton(
                  onPressed: (){},
                  style: TextButton.styleFrom(
                    primary: Colors.black,
                    backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
                  ),
                  child: Text(
                    '완료',
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ),
              ],
              title: Text(
                '중고거래 등록',
                style: Theme.of(context).textTheme.headline6,
              ),
            ),
          ),
        );
      },
    );
  }
}