[Flutter/개발 일지 5] Building beautiful UIs with Flutter

5번째 일지 22년 03월 18일

구글에서 제공하는 플러터 UI관련된 작은 프로젝트?를 따라하며 공부하는 시간을 가졌습니다.

https://codelabs.developers.google.com/codelabs/flutter#0

Building beautiful UIs with Flutter  |  Google Codelabs

---

1. Build the main user interface

---

이 파트에서 우선 StatelessWidget을 구현하고 Stateful하게 변경해야합니다. 그냥 변경하면 나누는 작업이 너무 귀찮을텐데 플러터에서 계속 바뀌는 화면과 고정되는 화면으로 바꾸기 전 위젯을 편리하게 분리하는 작업을 알려줍니다.

//시작코드
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'FriendlyChat',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FriendlyChat'),
        ),
      ),
    ),
  );
}

 

우선 MaterialApp을 오른쪽 클릭하고 Refactor > Extract Flutter Widget을 클릭하시면 됩니다.

아래에 제 환경에서 캡쳐화면 올려드립니다.

클릭하시면 아래와 같이 변합니다.

 

이후 home에 Scaffold에 파란 부분을 날리고 'ChatScreen' 으로 이름을 바꿔줍니다.

그리고 공백 칸에 stl이라고 치면 stless가 뜨는데 엔터키를 누릅니다.

엔터를 치면 아래 그림과 같이 되는데 박스친 부분에 ChatScreen 이라고 입력합니다.

나머지 로 Container를 Scaffold로 바꾸고 appbar와 title, text를 입력하면 분리가 손쉽게 됩니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const FriendlyChatApp(),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'FriendlyChat',
      home: ChatScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'FriendlyChat',
        ),
      ),
    );
  }
}

---

2. Add a UI for composing messages

---

앱의 상단에 텍스트 필드를 구현할 것인데 이것은 입력시마다 변해야 하는 stateful widget이므로

ChatScreen을 변경해야합니다.

 

클래스에서 ChatScreen을 누르고 Mac은 (Option + Return) 윈도우는 (Alt + Enter)를 누르면

아래와 같은 문구가 뜨고 손쉽게 변경할 수 있습니다.

이후로는 그냥 설명 따라 쭈욱 진행해보았습니다.

 

아래와 같이 TextField를 Row로 감싸야 할 때도 

TextField에 (option+return) (alt+enter)를 눌러서 감쌀 것들을 선택할 수 있습니다.