[Flutter] AppBar Text 중앙정렬

정태녕·2024년 1월 6일
0

flutter

목록 보기
5/7

AndroidStudio에서 AppBar를 작업하는 중에 Text가 왼쪽으로 정렬되어 있는것을 확인했다.
찾아보니 Meterial을 통해 AppBar를 생성하면 Text가 왼쪽으로 정렬되어 표시된다.


import 'package:flutter/material.dart';
//
### class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});
//
  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        // AppBar와 body 구분
        elevation: 1,
        surfaceTintColor: Colors.white,
        shadowColor: Colors.black,
        backgroundColor: Colors.white,
        foregroundColor: Colors.green,
        title: const Text(
          "오늘의 웹툰",
          style: TextStyle(
            fontSize: 34,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    );
  }
}



Text를 AxisAlignment를 통해 정렬해 주었다.

  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        // AppBar와 body 구분
        elevation: 1,
        surfaceTintColor: Colors.white,
        shadowColor: Colors.black,
        backgroundColor: Colors.white,
        foregroundColor: Colors.green,
        title: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "오늘의 웹툰",
              style: TextStyle(
                fontSize: 34,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
      ),
    );
  }
}



다른 방법이 없는지 찾아보던 중 AppBar에서 centerTitle를 통해 Text를 가운데 정렬하는 기능을 제공한다.

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});
  //
  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        // AppBar와 body 구분
        elevation: 1,
        surfaceTintColor: Colors.white,
        shadowColor: Colors.black,
        backgroundColor: Colors.white,
        foregroundColor: Colors.green,
        centerTitle: true,
        title: const Text(
          "오늘의 웹툰",
          style: TextStyle(
            fontSize: 34,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    );
  }
}

AppBar에서 Text를 가운데 정렬하기 위해서는 AxisAlignment를 사용하는 방법보다 AppBar에서 자체적으로 제공하는 centerTitle을 이용하는 것이 코드를 더 간결하고 가독성 있게 만들 수 있다.

profile
Mobile App Developer

0개의 댓글