안녕하세요. 이번 포스팅에서는 이전에 iOS 타이틀 왼쪽 정렬하기에 이어서 안드로이드 타이틀을 중앙 정렬하는 방법에 대해서 알아보겠습니다. Flutter 안드로이드 appBar의 타이틀은 기본 왼쪽 정렬이 되어 있습니다. ... return Scaffold( appBar: AppBar( title: Text( '테스트', ), ), body: Text( '바디', ), ); ... 그렇다면 안드로이드에서 타이틀을 중앙 정렬을 하는 방법은 어떻게 하면 될까요?? 이전 포스팅 iOS에서 타이틀 왼쪽 정렬하는 방법에서 마지막 부분의 appBar의 title의 Widget을 전체 너비의 Container와 그 안에 Text를 중앙 정렬로 추가를 해주면 쉽게 중앙 정렬을 할 수 있습니다. Flutter iOS A..

안녕하세요. 이번 포스팅에서는 AspectRatio를 이용해서 이미지를 비율에 맞게 보여주는 방법에 알아보겠습니다. css에 보면 aspect-ratio라고 있는데 16:9 사이즈를 보여주려면 아래와 같이 사용을 합니다. .className { aspect-ratio: 16 / 9; } Flutter에도 css와 동일하게 AspectRatio가 있습니다. 사용하는 방법은 아래와 같습니다. AspectRatio( aspectRatio: 16 / 9, child: ... ) 이제 AspectRatio의 child에 Image를 추가를 해보겠습니다. AspectRatio( aspectRatio: 16 / 9, child: Image.network('https://images.unsplash.com/photo-..

안녕하세요. 이번 포스팅에서는 AppBar에서 타이틀을 왼쪽 정렬하는 방법에 대해서 포스팅을 알아보겠습니다. 개인 토이 프로젝트로 Flutter를 이용해서 앱을 만들고 있는데요. 타이틀을 간단하게 좌측 정렬을 하려고 여러가지를 찾아보고 고민을 하다가 방법을 찾아서 공유를 드리는 글입니다. 먼저 AppBar를 이용해서 타이틀을 추가를 하게 되면 iOS에서 중앙 정렬이 되는 것을 볼수가 있습니다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildConte..

기본적으로 Flutter 프로젝트를 처음 생성했을 때 portrait 모드와 landscape 모드를 둘다 가능하게 되어 있다. 여기에서 landscape 모드를 비활성화 하기 위해서는 아래와 같이 하면 된다. 먼저 main.dart에 package:flutter/services.dart 를 import 해준다. import 'package:flutter/services.dart'; 그 다음 main 메소드에 코드를 추가해준다. // main.dart ... // disable landscape void main() { WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setPreferredOrientations( [ DeviceOrientation.po..

Flutter의 BottomNavigationBar은 무조건 2개 이상의 item을 추가해야 하며 3개까지는 별다른 옵션을 추가해주지 않아도 상관이 없다. 하지만 4개 이상의 item을 추가할 시 첫 item만 icon과 label이 제대로 나타나고 그 이후 항목에 대해서는 label이 제대로 나타나지 않아 위치가 이상하게 보이는 문제가 발생을 한다. 위와 같이 홈 item 만 icon과 label이 정상적으로 나타나고 그 뒤로는 label이 보이지 않아 홈만 위로 올라가있게 나온다. 이 문제를 해결하는 방법은 BottomNavigationBar에 type: BottomNavigationBarType.fixed을 추가해주면 된다 ... bottomNavigationBar: BottomNavigationB..