[UXUI][프론트엔드] 플러터 위젯으로 레이아웃 만들기(2)

 

플러터 위젯으로 레이아웃 만들기 오늘은 2편으로 돌아왔어요! 지난 번에 기초적인 뼈대를 만들 수 있는 위젯들을 몇 가지 소개해드렸는데요, 1편을 못 보신 분들은 아래의 링크에서 확인해보시고, 이번에는 앱의 네비게이션 역할을 하는 AppBar(), 화면을 정렬하는 Row()와 Column(), 그리고 사용자 입력을 받는 다양한 버튼과 리스트를 다루는 ListView()까지 살펴볼게요.

 

 

2025.03.06 - [IT] - [UXUI][프론트엔드] 플러터 위젯으로 레이아웃 만들기(1)

 

그럼 시작해볼까요?!

---

AppBar(), BottomAppBar() - 상단바와 하단바 추가하기

 

Flutter 앱에서는 상단바를 쉽게 추가할 수 있어요. AppBar()는 화면의 상단에 위치하며, 보통 앱의 제목이나 메뉴 버튼을 포함하는 역할을 해요.

AppBar(
  title: Text("Flutter 상단바 만들기"),
  backgroundColor: Colors.blue,
  actions: [
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {
        print("설정 버튼 클릭됨");
      },
    ),
  ],
};

 

위 코드를 적용하면 상단에 파란색 배경의 앱바가 생성되고, 우측에 설정 아이콘 버튼이 추가돼요.

 

하단바를 추가하려면 BottomAppBar()를 사용하면 돼요.

BottomAppBar(
  color: Colors.blue,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text(
      "하단 바"
      style: TextStyle(color: Colors.white),
      textAlign: TextAlign.center,
    ),
  ),
);

 

이렇게 하면 하단에 텍스트가 포함된 바가 생성돼요. 여기에 네비게이션 버튼을 추가해서 하단 네비게이션 바로 활용할 수도 있어요.

---

Row(), Column() - 위젯 배치를 가로 또는 세로로 정렬하기

 

여러 개의 위젯을 정렬할 때 Row() (가로 정렬)와 Column() (세로 정렬)을 사용해요.

 

Row() - 가로 정렬

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.star, color: Colors.orange),
    Text("가로 정렬"),
    Icon(Icons.star, color: Colors.orange),
  ],
);

 

 

Column() - 세로 정렬

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text("첫 번째 줄"),
    SizedBox(height: 10),
    Text("두 번째 줄"),
  ],
);

 

mainAxisAlignment를 spaceEvenly로 설정하면 요소들이 균등하게 정렬돼요.

SizedBox(height: 10)를 추가하면 위젯 사이에 여백을 줄 수 있어요.

---

TextButton(), ElevatedButton(), IconButton() - 버튼 추가하기

 

사용자 입력을 받을 때 버튼은 필수적인 요소예요. Flutter에서는 다양한 버튼을 제공해요.

 

TextButton() - 텍스트 버튼

TextButton(
  onPressed: () {
    print("텍스트 버튼 클릭됨");
  },
  child: Text("텍스트 버튼"),
);

 

ElevatedButton() - 입체감 있는 버튼

ElevatedButton(
  onPressed: () {
    print("엘리베이티드 버튼 클릭됨")
  },
  child: Text("클릭하세요"),
);

 

IconButoon() - 아이콘 버튼

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print("좋아요 버튼 클릭됨");
  },
);

 

버튼을 적절히 조합해서 사용자 경험을 최적화할 수 있어요.

---

ListView - 스크롤 가능한 리스트 만들기

 

리스트 형태의 데이터를 표시할 때 ListView()를 사용하면 스크롤 가능한 화면을 만들 수 있어요.

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text("사용자 1"),
      subtitle: Text("Flutter 개발자"),
    ),
    ListTile(
      leading: Icon(Icons.person),
      title: Text("사용자 2"),
      subtitle: Text("앱 디자이너"),
    ),
  ],
);

 

위 코드를 실행하면 아이콘과 텍스트가 포함된 리스트 아이템이 생성돼요.

 

많은 데이터를 표시할 경우 ListView.builder() 사용

ListView.builder(
  itemCount: (context, index) {
    return ListTile(
      leading: Icon(Icons.check_circle),
      title: Text("아이템 $index"),
    );
  },
);

 

이렇게 하면 스크롤 가능한 리스트를 동적으로 생성할 수 있어요.

---

 

마치며...

 

이번 글에서는 Flutter에서 기본적인 레이아웃을 구성하는 주요 위젯들을 정리해봤어요. MaterialApp()과 Scaffold()를 이용해 전체적인 앱 구조를 만들고, Text(), Icon(), Image.asset()을 활용해 콘텐츠를 배치했어요. 또한 Row()와 Column()을 이용한 정렬 방식과, 버튼 및 리스트뷰까지 다뤄봤어요.

이제 이 위젯들을 조합하면 Flutter로 간단한 앱 화면을 제작할 수 있을 거예요. 이후에는 네비게이션 기능, 상태 관리(State Management), 애니메이션 적용 등의 기능을 추가하면 더욱 완성도 높은 앱을 만들 수 있어요.

Flutter를 처음 접하는 분들은 이 기본 위젯들을 활용해 직접 화면을 구성해보면서 익숙해지는 것이 중요해요. 앞으로도 Flutter의 다양한 기능을 배우면서 점점 더 완성도 높은 앱을 만들어보세요!