[flutter] 플러터 Row 위젯을 이용한 푸터 만들기

07 Dec 2023

flutter

플러터는 Google에서 개발한 오픈 소스 UI 프레임워크로, 크로스 플랫폼 앱 개발을 위해 사용됩니다. 이번에는 플러터의 Row 위젯을 이용하여 간단한 푸터를 만들어보겠습니다.

Row 위젯 소개

Row 위젯은 가로로 정렬된 자식 위젯을 가질 수 있는 플러터의 레이아웃 위젯입니다. 자식 위젯은 가로로 배열되며, 필요에 따라 자동으로 줄바꿈이 될 수 있습니다.

푸터 만들기

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "플러터 푸터 예제",
        home: Scaffold(
          appBar: AppBar(title: Text("플러터 푸터 예제")),
          body: Container(
            child: Column(
              children: [
                Expanded(
                  child: Center(
                    child: Text("본문 컨텐츠"),
                  ),
                ),
                Container(
                  color: Colors.grey,
                  padding: EdgeInsets.all(16.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("푸터"),
                      SizedBox(width: 8.0),  // 간격을 주기 위한 위젯
                      Text("푸터"),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

위의 코드는 MaterialApp과 Scaffold를 이용하여 플러터 앱의 기본 골격을 만들고, Row 위젯을 이용하여 푸터를 구성하는 예제입니다.

본문 컨텐츠를 위한 Expanded 위젯은 화면의 남은 공간을 차지하면서 자식 위젯을 가운데로 정렬합니다. 푸터를 추가하기 위해 Row 위젯을 사용하고, MainAxisAlignment를 이용하여 가운데 정렬을 설정합니다. 푸터 텍스트 사이에 간격을 주기 위해 SizedBox를 사용하여 간격을 설정합니다.

위의 코드를 실행해보면, 푸터가 화면 하단에 가운데로 정렬되어 나타나는 것을 확인할 수 있습니다.

결론

플러터에서는 Row 위젯을 이용하여 간단한 푸터를 만들 수 있습니다. 이를 통해 원하는 UI를 구성하는 데 도움이 될 것입니다. 추가로 상세한 속성과 다른 위젯과의 조합을 통해 다양한 디자인을 구현할 수도 있습니다.

참고 자료

Flutter 공식 문서