[flutter11] Login Page UI

Login Page UI 그려보기

UI 간단하게 그리는 법도 기억이 가물가물해 간단한 로그인 페이지 ui 그리는 걸 기록해 보려고 한다.

📌 MaterialApp()
📌 Scaffold()
📌 AppBar()
📌 Padding()
📌 Column()
📌 TextField()
📌 ElevatedButton()

✔️ MaterialApp()

MaterialApp위젯에 관련해 정리는 예전에 포스팅 했던 것이 있다.

🔗 Link _ flutter 기초

✔️ Scaffold()

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold()
  }
}

이 내용도 역시 flutter 기초에 있지만 여기에도 기록하기

• Scaffold의 역할은 내가 원하는 곳에 위젯을 쉽게 배치할 수 있도록 해준다.
• home은 내가 화면에 보여줄 첫번째 위젯을 작성한다.
• 여기서 Scaffold()가 화면에 보여지는 첫번째 위젯

✔️ AppBar()

앱바 내용도 요기에

🔗 Link _ flutter 기초

✔️ Padding()

어렵지는 않지만 막상 쓰려면 또 찾아보게 되는 Padding

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Padding(
            padding: const EdgeInsets.all(16.0),
          ),
        ));
  }
}

• EdgeInsets.all _ 모든 방향에 padding값을 준다.
• EdgeInsets.only() _ 특정 방위를 지정해 padding 값을 줄 수 잇다.

EdgeInsets.only(
  left: 0,
  right: 0,
  top: 0,
  bottom: 0
)

• EdgeInsets.symetric() _ 상하, 좌우를 묶어 padding값을 줄 수 있다.

EdgeInsets.symetric(
  vertical: 0, //상하
  horizontal: 0 //좌우
)

✔️ Column()

위젯들을 세로로 정렬해 준다. 역시 이전에 정리해 둔 내용이 있다.

🔗 flutter 레이아웃

✔️ TextField()

텍스트 입력 인풋 위젯이다.

TextField(decoration: InputDecoration(labelText: '이메일')),
TextField(
  obscureText: true,
  decoration: InputDecoration(labelText: '비밀번호'),
),

• InputDecoration() 위젯으로 placeholder를 추가해 줄 수 있다.
• obscureText: true, 로 설정하면 입력되는 텍스트가 가려진다.
  
  
• 결과
  

✔️ ElevatedButton()

버튼을 생성해 주는 위젯이다.

Container(
  width: double.infinity,
  margin: EdgeInsets.only(top: 30),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('로그인')
  ),
)

• ElevatedButton() 위젯에는 width속성이 없어 부모 위젯에 크기를 이용해 조절해야 한다. 그래서 Container()위젯으로 감싸주었다.
• Container()에 margin속성을 사용해 여백도 줬다.
  
  
• 결과