flutter 앱 개발 기초 로그인 페이지 만들기

 

코딩은 main.dart 에서 시작합니다. 

 

이중 home 이 위젯을 보여주는 공간입니다. 

보시면 scaffold 위젯이 사용되고 있습니다. 

앱에서 화면을 시작할때는 scaffold 위젯으로 시작합니다. 

여기서 scaffold는 여러 위젯들의 틀을 잡아주는 역할을 합니다. 

 

Scaffold(
	appBar: 다른 위젯, // 상단 바
	body: 다른 위젯, //화면 중앙에 가장 큰 면적
	bottomNavigationBar: 다른 위젯, //하단 바
	floatingActionButton: 다른 위젯, //우측 하단
),

로그인 페이지를 만들기 위해 

body 부분에 textfield()위젯을 사용합니다.

 

+바디를 누르고 전구표시 column 으로 묶기를 사용해 

바디 전체를 한번 묶어 줍니다. 

 

Column(
  children: [ // 자식 위젯들
    Text("위젯1"),
    Text("위젯2"),
  ],
),

세로방향으로 위젯들을 나열할 때 사용됩니다. 

그러면 이렇게 입력할 수 있는 선만 생깁니다. 

decoration: inputdecoration 과 

labeltext 로 이름값을 설정해 줍니다. 

 

복사해서 비밀번호 란도 만들어 줍니다. 

위의 hello flutter 은 

마지막에 home 란을 구성할때 만져줍시다. 

여러분의 완성화면은 hello flutter를 제외한 저 화면이 

나오시면 됩니다.

 

저렇게 만들어 주시면 비밀번호를 쳣을때 비밀번호가 *** 로 뜨지 않고

그대로 뜨게 되는데요 , ***로 표시하고 싶을때는

obscureText: true 속성을 textfielde에 주시면 됩니다. 

 

// 위로 올라와 있는 듯한 버튼
ElevatedButton(
  onPressed: () {},
  child: Text('Elevated Button'),
),

// 텍스트 버튼
TextButton(
  onPressed: () {},
  child: Text('Text Button'),
),

// 아이콘 버튼
IconButton(
  onPressed: () {},
  icon: Icon(Icons.add),
),

버튼 구성입니다.

이 중 위로 올라와 있는 버튼을 사용하여 

로그인 버튼을 만들어 봅시다. 

 

ElevatedButton(

onpressed: () {},

child:Text("로그인")

)

 

버튼이 생성됩니다. 

 

이제 appbar에 hello flutter 를 만들어 봅시다.

title: 을 만들어주고 

Text(

"hello flutter",

style: Textstyle(fontsize:28),

로 맞춰주면 title 로 appbar에 들어간 모습을

보실 수 있습니다. 

 

여기에 중앙 정렬을 위해 

appbar() 안에다

centerTitle: true

입력 해 줍니다. 

body 아래 위젯들의 관계도 입니다. 

이때까지 만들어놓은 코드들의 관계도 라 보시면 되겠습니다. 

 

바디 전체에 padding 을 좀 주기위해 

column 에다 padding 값을 주겠습니다.

 

column 위젯을 선택한 뒤 전구표시 클릭

padding 으로 묶어줍니다. 

추가해 주면 

padding: 속성이 자동으로 추가됩니다. 

이때 padding 값을 얼마나 줄 지는 

전방위 동일 적용: EdgeInsets.all(8) 특정 방위만 적용:EdgeInsets.only(   left: 8,   right: 8, ) 위아래, 좌우 적용:EdgeInsets.symmetric( vertical: 8, horizontal: 8, )

edgelnsets 를 통해 지정해 줍니다. 

저희는 요롷게 16으로 지정해 주겠습니다.

 

마지막으로 이메일 입력 란에 이미지를 추가해 봅시다.

요렇게 

Image.network("https://i.ibb.co/CwzHq4z/trans-logo-512.png"),

준비된 이미지를 추가해 줍니다. 

물론 body 영역에 추가 해 주셔야 합니다. 

 

*아직 크기지정이 되지 않았음으로 너무 커서 화면에 오류가 날겁니다. 

이때 스크롤이 가능하게 만들어 주셔야 합니다. 

 

body 전체를 감싸고 있는 padding 을 전구를 눌러 

임의의 위젯 wrap with widget 으로 감싸줍니다. 

 

그럼 widget으로 body 전체가 감싸지게 되는데 

이 위젯 이름을 

singlechildscrollview 로 변경후 저장해 주시면 됩니다. 

*이미지 크기는 image.network 아래 with: 로 변경 가능합니다. 

*이미지 또한 padding 으로 감싸서 다른 위젯과 간격을 줍니다. 

 

 

로그인 페이지 만들기 끝 ! 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "Hello Flutter",
            style: TextStyle(fontSize: 28),
          ),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(32),
                  child: Image.network(
                    "https://i.ibb.co/CwzHq4z/trans-logo-512.png",
                    width: 81,
                  ),
                ),
                TextField(
                  decoration: InputDecoration(
                    labelText: "이메일",
                  ),
                ),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    labelText: "비밀번호",
                  ),
                ),
                Container(
                  width: double.infinity,
                  margin: EdgeInsets.only(top: 24),
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("로그인"),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

완성 코드입니다 :)