flutter을 이용한 간단한 화면 만들기

 

 

완성본 캡쳐 -

 

 

1. Scaffold를 이용해 화면을 구성한다. 

 

home: Scaffold (

)

 

 

 

2. Scaffold 내에서 appBar를 만든다. 

 

appBar: AppBar(
          title: Text(
            'Hello Flutter',
            style: TextStyle(fontSize: 28),
          ),
          centerTitle: true,
        ),

title 영역에 Text 위젯을 만든다. 

보여질 text는 'Hello Flutter' 이다. 

글자의 크기는 style - TextStyle에서 변경할 수 있다.

 

이렇게 두면 글자는 왼쪽 정렬된다. 

중간으로 옮기기위해 centerTitle : true를 속성으로 준다. 

 

 

 

3. body는 SingleChildScrollView로 만든다.

이메일과 비밀번호를 입력과 사진 로그인 버튼을 만들예정인데 

이렇게 만들면 한 화면에 다 넣을 수 없어 스크롤이 필요하기 때문이다. 

 

Column 위젯을 이용해 한 컬럼에 들어가도록 만든다. 

이미지는 

 

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

이런식으로 주소를 통해 넣어줄 수  있다. 

 

 

 

4. 이메일과 비밀번호를 입력하는 칸 

 

TextField를 통해 만들 수 있다. 

                TextField(
                  decoration: InputDecoration(labelText: '이메일'),
                ),

이렇게 decoration을 주어 옆에 이메일 글자를 만들 수 있다. 

 

 

 

 

5. 로그인 버튼을 만들어준다. 

 

 

 

위 사진의 로그인버튼과 같은 버튼을 엘리베이터 버튼이라고 한다. 

눌렀을 때 아무일도 일어나지않기에 onPressed는 익명함수로 만들어준다. 

Text는 '로그인'으로 만들어준다. 

엘리베이터 버튼안에서 width와 같은 것들을 변경해줄 수 없기 때문에 Container로 감싸서 설정해준다. 

 

 

 

 

---

 

 

 

 

 

전체 코드 : 

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(
          title: Text(
            'Hello Flutter',
            style: TextStyle(fontSize: 28),
          ),
          centerTitle: true,
        ),
        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: const EdgeInsets.only(top: 16),
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text('로그인'),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

 

너무 작고 귀여운 코드다....😂

flutter를 처음 배워본다. 

dart라는 언어가 처음이지만 java + python 느낌이라 그렇게 어렵지 않았다. 

꾸준히 열심히 배워서 앱 하나 뚝딱 만들 수 있을 때까지 숙련해야겠다. 

 

 

 

인프런의 flutter 앱 개발 완성 강의를 보면서 공부하고있다. 

설명이 깔끔하고 자세하다. 

아주 만족하면서 수강하고 있다.