[flutter] 플러터(Flutter)에서 푸터(Footer) 위젯 사용하기

플러터(Flutter)는 크로스 플랫폼 앱 개발 프레임워크로, 다양한 위젯을 제공하여 사용자 인터페이스를 구축할 수 있습니다. 이 중에서도 푸터(Footer) 위젯은 화면의 하단에 위치하여 앱의 정보나 추가 기능을 표시하기에 적합합니다. 아래에서 간단한 예제와 함께 푸터 위젯을 사용하는 방법을 알아보겠습니다.

1. 푸터 위젯 생성

먼저, 플러터 프로젝트의 lib 폴더에 새로운 파일을 생성한 후 아래의 코드를 입력합니다:

import 'package:flutter/material.dart';

class MyFooter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      height: 50.0,
      child: Center(
        child: Text(
          'Footer',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 MyFooter 클래스가 Footer 위젯을 정의하고 있습니다. Container 위젯을 사용하여 배경색을 회색으로 설정하고, 높이를 50픽셀로 지정하였습니다. 그리고 Center 위젯 내부에 Text 위젯을 사용하여 ‘Footer’라는 텍스트를 표시하고 있습니다.

2. 메인 앱에 푸터 추가

다음으로, 푸터를 메인 앱에 추가하여 보여주는 방법을 알아보겠습니다. 메인 앱은 lib 폴더의 main.dart 파일입니다.

아래의 코드 중간에 MyFooter 위젯을 추가합니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Footer Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Footer Example'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
        bottomNavigationBar: MyFooter(), // 푸터 추가
      ),
    );
  }
}

위의 코드에서는 bottomNavigationBar 속성을 사용하여 MyFooter() 위젯을 추가하고 있습니다. 이렇게 하면 앱의 하단에 MyFooter 위젯이 표시됩니다.

3. 푸터 커스터마이징

만약, 푸터의 스타일이나 내용을 변경하고 싶다면 MyFooter 클래스의 코드를 수정하면 됩니다. 예를 들어, 푸터 배경색을 변경하거나 텍스트 스타일을 수정할 수 있습니다.

class MyFooter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blueGrey, // 배경색 변경
      height: 50.0,
      child: Center(
        child: Text(
          'Copyright 2021', // 내용 변경
          style: TextStyle(
            color: Colors.white,
            fontSize: 18.0, // 폰트 크기 변경
            fontWeight: FontWeight.bold, // 폰트 굵기 변경
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 푸터의 배경색을 회색에서 청회색으로 변경하고, 텍스트 내용을 ‘Footer’에서 ‘Copyright 2021’로 수정하며 폰트 크기와 굵기도 조정하였습니다.

마무리

위에서는 플러터(Flutter)에서 푸터(Footer) 위젯을 사용하는 방법에 대해 알아보았습니다. 푸터는 앱의 정보나 추가 기능을 표시하는 데 유용한 위젯입니다. 원하는 스타일과 내용으로 푸터를 커스터마이징하고 앱에 추가하여 보다 완성도 높은 사용자 인터페이스를 구현할 수 있습니다.

다양한 플러터 위젯에 대한 자세한 정보는 공식 플러터 위젯 카탈로그를 참고하여 확인할 수 있습니다.