[Flutter] 사용해보기

29 Mar 2021 in Devlog on Flutter

• Text 사용
• Icon 사용
• Container 사용
• Button 사용

이번에는 Flutter 기본 기능을 간단히 사용해보고자 합니다. 먼저 모든 샘플 프로젝트의 모든 내용을 지운 후 아래 코드를 작성해 줍니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    );
  }
}

위 코드가 Flutter 에서 Application 을 제작할 때 항상 사용되는 기본 구조라고 할 수 있습니다.

또한 위 코드에서 StatelessWidget 을 작성하는 경우, stless 를 입력 후 enter 를 누르면 template 이 자동완성됨을 확인할 수 있습니다.

StatefulWidget 을 작성하는 경우, stful 을 입력 후 enter 를 누르면 template 이 자동완성됩니다. 이를 이용해 위에서 작성한 코드 아래에 다음 코드를 작성해 줍니다.

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

이후 MyApp 의 home 옵션에 HomeScreen 객체를 작성해 줍니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

이후 Application 을 실행하면 다음과 같이 동작함을 확인할 수 있습니다.

Text 사용

Flutter 에서 화면에 글자를 표현할 때는 Text 라는 Class 를 사용합니다. _HomeScreeState 클래스의 build 함수에서 Container() 를 다음과 같이 수정합니다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Text("Hello");
  }
}

이후 어플을 다시 실행 (hot reload 기능 사용) 하여 Application 을 다시 확인해 봅니다.

화면에서 Text 가 보이는 것을 확인할 수 있습니다. 하지만 글자의 생김새가 이상함을 알 수 있습니다. 이는 Text 가 위치한 곳이 Material Design 에 대한 Layout 이 생성되어 있지 않기 때문입니다.

Material Design 을 유지시키는 Layout 은 주로 Scaffold 를 사용하여 생성합니다. Text 를 아래와 같이 Scaffold 클래스로 감싸줍니다. Text 는 Scaffold 의 body 옵션에 들어가면 됩니다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text("Hello"),
    );
  }
}

결과는 다음과 같습니다.

Icon 사용

Flutter 에서는 간단한 Icon 을 기본적으로 제공하고 있습니다. Icon Widget 은 icon 이라는 옵션(예시와 같이 명시하지 않아도 됩니다) 에 IconData 라는 값을 받고 있습니다. 이 IconData 가 화면에 표현할 Icon 종류를 나타냅니다. 기본제공하고 있는 IconData 에 대해서는 Icons.{아이콘 이름} 을 통해서 접근 및 확인할 수 있습니다. 사용방법은 다음과 같습니다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Icon(Icons.search),
    );
  }
}

Container 사용

다음은 Container 입니다. Container 는 화면에 사각형 영역을 그리는 방법입니다. 물론 세부 옵션을 조정하여 사각형 외에 다양한 그림을 그리는 것이 가능합니다. Flutter 내의 거의 모든 디자인의 출발점이기도 하니 자주 사용해보시기 바랍니다. 아래 예시에서는 Container 의 영역을 표시하기 위해 빨간색을 사용하여 표시하도록 하였습니다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
      )
    );
  }
}

다른 위젯과는 달리 사이즈를 직접 언급하지 않으면 기본적으로는 가능한 최대의 가로-세로 길이를 가지게 됩니다.

Container 의 크기를 조절하고 싶은 경우 height 옵션과 width 옵션을 사용하면 됩니다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        height: 100,
        width: 100,
      )
    );
  }
}

Button 사용

마지막으로 사용해볼 것은 버튼입니다. Flutter 에서는 Button 이라는 별도의 위젯 없이, Container 나 다른 Widget 에 Button 을 특징을 추가하여 주로 사용한다. 그 방법 중 하나가 ElevatedButton() 입니다. 코드는 아래와 같습니다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        onPressed: () {},
        child: Text("Button"),
      )
    );
  }
}

onPressed 옵션은 버튼을 클릭시 동작할 함수가 들어가야 하는 부분입니다. () {} 는 아무것도 하지 않겠다는 뜻이며, void function() {} 와 동일하다고 생각하시면 됩니다.

child 옵션에는 버튼의 특성을 가질 Widget 을 작성해 주시면 됩니다.

결과로 부터 생성된 버튼을 클릭해 보시면 클릭시 물결모양 애니메이션이 발생함을 확인할 수 있습니다.