Flutter Instagram Clone #7 로그인 페이지 UI 작성

jakeseo_me·2020년 7월 24일
0

Flutter-Instagram-Clone

목록 보기
7/14

Flutter Instagram Clone #7 로그인 페이지 UI 작성

원본 강의

https://www.inflearn.com/course/flutter-%EC%9E%85%EB%AC%B8/dashboard

여기서 유료 결제를 해서 듣고있는 강의의 내용을 개인적인 공부 목적으로 지식 위주로 정리해봅니다.

화면 설계

대략 아래와 같은 화면을 만드는 건데,

Sign in with Google이라고 적힌 부분 이외에는 다 이미 배웠던 것이다.

flutter_signin_button 패키지 설치하기

pubspec.yaml 파일에 들어가서 의존성에 flutter_signin_button: ^1.0.0을 추가해준다.

소스코드 완성본

import 'package:flutter/material.dart';
import 'package:flutter_signin_button/button_list.dart';
import 'package:flutter_signin_button/button_view.dart';

class LoginPage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('인스타그램 클론',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30)),
          Padding(
            padding: EdgeInsets.all(15),
          ),
          SignInButton(Buttons.Google, onPressed: () {})
        ],
      ),
    ));
  }
}

전부 이전에 배웠던 것이라 딱히 노트할만한 것은 없는 것 같다.

SignInButton의 사용법도 매우 쉽다.

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글