소개

이 기사는 "HTC Advent Calendar 2020"의 첫 번째 기사입니다.

쓰기는 HTC 팀의 개발 담당자입니다.
평소에는 SI 기업에 근무하고 인프라 엔지니어로 일하고 있습니다.
이번에는 팀 멤버의 기술 향상을 위해 어드벤트 캘린더에 팀으로 참가해 보기로 했습니다.

아니 HTC란 무엇인가? !라는 느낌이라고 생각하기 때문에, HTC에 대해서 간단하게 접해 두겠네요.
「 ONE JAPAN HACKATHON 2020 」라는 해커슨에 참가했을 때에 결성된 팀입니다.
Hackason으로 만든 작품에 대해서는 팀원이 기사를 써주고 있으므로, 흥미가 있는 분은 이쪽을 봐 주세요.

ONE JAPAN HACKATHON에 참가한 이야기

염소와 부재표로 원격 해커슨 우승 이야기

본 기사는 타이틀에도 기재하고 있는 대로, 처음으로 Flutter를 해 보았다고 하는 내용입니다.
비슷한 기사가 많고 신규성은 전혀 없지만 개인적인 출력과 후학을 위해 쓰게 됩니다.

대상 독자

처음으로 Flutter를 개발하는 사람

Flutter의 환경 구축이 완료되었습니다

실행 환경

macOS Catalina 버전 10.15.7

Flutter 버전 1.20.4

Dart 버전 2.9.2

Flutter란?

Google에서 제공하는 UI 툴킷입니다. 모바일 웹 및 데스크톱처럼 네이티브 컴파일된 아름다운 애플리케이션을 단일 코드베이스에서 구축할 수 있다고 합니다.

이번에 만드는 것

버튼이 2개 있고, 덧셈과 뺄셈을 할 수 있는 카운트 앱을 만듭니다.

앱 구현

먼저 새 Flutter 프로젝트를 만들고 다음과 같은 화면이 표시되는지 확인합니다.

버튼 추가

그런 다음 버튼을 추가합니다. 이번에는 RaisedButton을 사용합니다..icon() 를 사용하면 아이콘이 있는 버튼이 됩니다.Icons.add_circle 에서 아이콘을 선택할 수 있습니다. 여기 에서 아이콘 목록을 확인할 수 있습니다.onPressed: _incrementCounter : 버튼을 터치했을 때의 처리를 지정할 수 있습니다.

main.dart

// ... 略
class _MyHomePageState extends State<MyHomePage> {
// ... 略
  @override
  Widget build(BuildContext context) {
// ... 略
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton.icon(
                  icon: const Icon(
                    Icons.add_circle,
                    color: Colors.white,
                  ),
                  label: const Text('Plus'),
                  onPressed: _incrementCounter,
                  color: Colors.red,
                  textColor: Colors.white,
                ),
                SizedBox(width: 30),
                RaisedButton.icon(
                  icon: const Icon(
                    Icons.remove_circle,
                    color: Colors.white,
                  ),
                  label: const Text('minus'),
                  onPressed: _decrement,
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              ],
            ),
// ... 略
  }
}

버튼 추가 후에는 이런 화면이 되어 있다고 생각합니다.
모든 파트가 중앙에 가까워지고 있습니다만, 우선 버튼의 배치는 완료입니다.

마이너스 처리 추가

버튼을 누를 때마다 가산되는 처리는 처음부터 구현되어 있으므로 여기에서는 감산 처리를 추가합니다.

main.dart

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrement() {
    setState(() {
      _counter--;
    });
  }
// ... 略
}

레이아웃 변경

마지막으로 쉽게 레이아웃을 정돈합니다. 몇 가지 방법이 있는 것 같지만 이번에는 Spacer와 SizedBox를 사용했습니다.Spacer 는 문자 그대로 공백을 취하는 위젯입니다. Row 또는 Column 위젯에서 mainAxisAlignment 속성만으로는 제어할 수 없는 레이아웃을 만들 때 자주 사용되는 것 같습니다.SizedBox 위젯은 지정된 크기의 상자를 만들 수 있습니다. 속성은 width , height , child 뿐입니다.

main.dart

class _MyHomePageState extends State<MyHomePage> {

// ... 略

  @override
  Widget build(BuildContext context) {

// ... 略

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Spacer(
              flex: 2,
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Spacer(),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,

// ... 略

            ),
            Spacer(),
          ],
        ),
      ),
    );
  }
}

레이아웃을 변경한 결과는 다음과 같습니다. 쉽게 버튼과 텍스트 사이에 공백을 찍을 수있었습니다.
(Flutter 초보자 지나서, 이러한 앱 설계가 올바른지 모르기 때문에, 누군가 자세한 쪽이 있으면 가르쳐 주셨으면 합니다.)

참고문헌

Flutter Doc KR
htps : // f ぅ라고 r. ctr의 st. 코 m/바시 c/