35. “프로그램언어 다트(Dart)에서의 Widget 및 UI 구현”

by

프로그래밍 언어 다트(Dart)와 위젯에 대해

플러터는 Google이 만든 UI(사용자 인터페이스) 툴킷입니다. 많은 개발자들은 이 툴킷을 이용하여 아름답고 빠르며 모바일, 웹, 데스크톱 환경에서 동일하게 동작하는 네이티브 앱들을 구현합니다. 이 때, 구현에 사용되는 프로그래밍 언어가 바로 다트(Dart)입니다.

다트와 위젯

플러터에서는 다트 언어를 사용하여 위젯(Widget)라 불리우는 빌딩 블록을 생성합니다. 위젯은 앱의 일부분(버튼, 메뉴, 창 등)을 나타내는데 사용됩니다. 이 위젯들은 다양한 형태와 기능을 가질 수 있으며, 합쳐져서 하나의 UI을 이룹니다.

다트에서의 UI 구현

다트에서 UI를 구현하려면, 많은 수의 기본 제공 위젯들을 조합하여 사용합니다. 각기 다른 시나리오에 따라 다양한 위젯들을 사용하여 인터페이스를 구성하고, 사용자의 액션에 반응하도록 만들 수 있습니다.

코드 예제

아래의 코드는 간단한 UI를 구현한 다트 코드입니다. MaterialApp 위젯으로 기본 앱 구조를 설정하고, 그 내부에 Scaffold로 화면 구조와 AppBar 위젯으로 상단에 앱 바를 추가했습니다. 그리고 본문에는 Center 위젯과 Text 위젯을 사용하여 화면 중앙에 텍스트를 배치하였습니다.


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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),
        ),
        body: Center(
          child: Text('Welcome to Flutter'),
        ),
      ),
    );
  }
}

코드 해설

이 코드에서, MyApp 클래스는 StatelessWidget을 상속받아서 불변의 위젯(default stateless widget)을 구현합니다. runApp() 함수는 MyApp 객체를 생성하고, 그 위젯을 화면에 표시합니다. MaterialApp 위젯 안에는 Scaffold 위젯이 오게 되며, 이는 앱의 기본 상태 세팅을 의미합니다. AppBar를 이용하여 앱의 상단에 바를 만들고, 중앙에 ‘Hello World’라는 문자를 표기하게 됩니다.

마무리

이처럼, 다트와 플러터를 이용하면 간단하면서도 다양한 UI를 구현할 수 있습니다. 위젯들을 조합하여 생성한 앱 레이아웃은 사용자에게 다양한 기능들을 제공하게 되며, 이를 통해 사용자 경험을 높일 수 있습니다. 다트와 플러터를 통해 여러분이 원하는 앱을 현실화해보세요!

Leave a Comment