2. 회원가입 분기 페이지

아래의 페이지다. 

Appbar가 없기 때문에 SafeArea를 주고

Column으로 모두 선언한 후 SizedBox로 간격을 벌려서 만들 생각이다.

초안은 기본 위젯에 익숙해지려고 기본 위젯들로만 구성중이지만, 여러가지 위젯들을 얼른 공부해야겠다..

 

기본 위젯만 사용해서 그렇게 오래 걸리지 않았다. 

아래 두 부분을 처음 해봐서 익숙하지 않아서 그런지 각각 만들려고 했다.

처음 만들고 이후에 1개만 만들고 컴포넌트로 따로 빼주고 재사용 했다. 

전체 코드 

import 'package:finalproject_front/pages/sign/join_division_page/components/division_button.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(40.0),
          child: Column(
            children: [
              SizedBox(height: 50),
              SizedBox(
                width: double.infinity,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "어떤 서비스를 이용하고 싶으신가요?",
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: 10),
                    Text(
                      "원하는 회원가입 유형을 선택하세요.\n의뢰인으로 가입 후에도 전문가 등록이 가능합니다.",
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.normal,
                        color: Color(0xff6C6C6C),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 300),
              DivisionButton(title: "의뢰인으로 가입", subtitle: "비즈니스 외주,아웃소싱을 원한다면"),
              SizedBox(height: 20),
              DivisionButton(title: "전문가로 가입", subtitle: "전문성으로 수익창출을 원한다면"),
            ],
          ),
        ),
      ),
    );
  }
}

 

DivisionButton

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class DivisionButton extends StatelessWidget {
  final String title;
  final String subtitle;
  const DivisionButton({
    required this.title,
    required this.subtitle,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      focusColor: Color(0xffF8F8F8),
      onTap: () {
        Navigator.pushNamed(context, "/join");
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "${subtitle}",
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.normal,
                  color: Color(0xff6C6C6C),
                ),
              ),
              SizedBox(height: 10),
              Text(
                "${title}",
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ],
          ),
          Icon(CupertinoIcons.forward)
        ],
      ),
    );
  }
}