OrientationBuilder

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:tiktok_clone/constants/gaps.dart';
import 'package:tiktok_clone/constants/sizes.dart';
import 'package:tiktok_clone/features/authentication/username_screen.dart';
import 'package:tiktok_clone/features/authentication/login_screen.dart';
import 'package:tiktok_clone/features/authentication/widgets/auth_button.dart';

class SignUpScreen extends StatelessWidget {
  const SignUpScreen({super.key});

  void _onLoginTap(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const LoginScreen(),
      ),
    );
  }

  void _onEmailTap(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const UsernameScreen(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
      builder: (context, orientation) {
        /* if (orientation == Orientation.landscape) {
          return const Scaffold(
            body: Center(
              child: Text('Plz rotate ur phone.'),
            ),
          );
        } */
        return Scaffold(
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: Sizes.size40,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Gaps.v80,
                  const Text(
                    "Sign up for TikTok",
                    style: TextStyle(
                      fontSize: Sizes.size24,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Gaps.v20,
                  const Text(
                    "Create a profile, follow other accounts, make your own videos, and more.",
                    style: TextStyle(
                      fontSize: Sizes.size16,
                      color: Colors.black45,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  Gaps.v40,
                  if (orientation == Orientation.portrait) ...[
                    GestureDetector(
                      onTap: () => _onEmailTap(context),
                      child: const AuthButton(
                        icon: FaIcon(FontAwesomeIcons.user),
                        text: "Use email & password",
                      ),
                    ),
                    Gaps.v16,
                    const AuthButton(
                      icon: FaIcon(FontAwesomeIcons.apple),
                      text: "Continue with Apple",
                    )
                  ],
                  if (orientation == Orientation.landscape)
                    Row(
                      children: [
                        Expanded(
                          child: GestureDetector(
                            onTap: () => _onEmailTap(context),
                            child: const AuthButton(
                              icon: FaIcon(FontAwesomeIcons.user),
                              text: "Use email & password",
                            ),
                          ),
                        ),
                        Gaps.h16,
                        const Expanded(
                          child: AuthButton(
                            icon: FaIcon(FontAwesomeIcons.apple),
                            text: "Continue with Apple",
                          ),
                        )
                      ],
                    )
                ],
              ),
            ),
          ),
          bottomNavigationBar: BottomAppBar(
            color: Colors.grey.shade50,
            elevation: 2,
            child: Padding(
              padding: const EdgeInsets.symmetric(
                vertical: Sizes.size32,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    'Already have an account?',
                    style: TextStyle(
                      fontSize: Sizes.size16,
                    ),
                  ),
                  Gaps.h5,
                  GestureDetector(
                    onTap: () => _onLoginTap(context),
                    child: Text(
                      'Log in',
                      style: TextStyle(
                        fontSize: Sizes.size16,
                        fontWeight: FontWeight.w600,
                        color: Theme.of(context).primaryColor,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

이 코드에서 OrientationBuilder 위젯은 사용자의 디바이스 방향(가로 모드 또는 세로 모드)에 따라 다른 UI를 제공하는 데 사용됩니다. OrientationBuilder는 자식 위젯의 레이아웃을 결정하기 위해 디바이스의 현재 방향을 감지하고, 그에 따라 적절한 위젯을 빌드합니다.

OrientationBuilder 사용법:

• OrientationBuilder는 builder 콜백을 받으며, 이 콜백은 현재 컨텍스트(BuildContext)와 디바이스 방향(Orientation)을 인자로 제공받습니다.
• builder 콜백 내에서, 디바이스 방향(orientation)에 따라 조건부로 다른 위젯을 반환할 수 있습니다.

코드 내에서의 로직:

1. 디바이스 방향 확인:

   • OrientationBuilder의 builder 함수 내에서 orientation 인자를 사용하여 현재 디바이스의 방향이 세로(Orientation.portrait)인지, 가로(Orientation.landscape)인지를 확인합니다.

2. 세로 모드(Orientation.portrait)에서의 UI:

   • 세로 모드일 때, 이메일 및 비밀번호 사용 옵션과 애플 로그인 옵션을 세로로 나열하여 표시합니다. 각 옵션은 AuthButton 위젯을 사용하여 구현되며, GestureDetector를 사용하여 탭 이벤트를 처리합니다.

3. 가로 모드(Orientation.landscape)에서의 UI:

   • 가로 모드일 때, 이메일 및 비밀번호 사용 옵션과 애플 로그인 옵션을 가로로 나란히 배열하여 표시합니다. 이는 Row 위젯 안에 두 개의 Expanded 위젯을 사용하여 구현되며, 각 Expanded 위젯 안에 AuthButton이 포함됩니다.

4. 로그인 탭 처리:

   • 화면 하단의 'Log in' 텍스트를 탭하면 _onLoginTap 함수가 호출되어, LoginScreen으로 화면 전환이 이루어집니다.

결론:

OrientationBuilder를 사용함으로써, 이 코드는 디바이스의 방향에 따라 유연하게 반응하는 UI를 제공합니다. 이를 통해 사용자는 세로 및 가로 모드에서 모두 최적화된 사용자 경험을 누릴 수 있습니다. 이 방법은 특히 다양한 화면 크기와 방향을 지원해야 하는 모바일 앱에서 유용하게 활용될 수 있습니다.