[Flutter] Theme and Size Settings

Tyger·2021년 10월 20일
0

Theme and Size

Flutter로 개발을 하다보면 ThemeData, Size 위젯의 속성 값을 받아서 사용하는 경우가 많다

ThemeData 속성을 사용하거나 디바이스의 사이즈를 기준으로 사이즈 값을 제어할 경우에 사용하고 싶은 파일마다 아래와 같이 작성을 해야한다

이렇게 개발을 하는건 생각보다 귀찮은 작업이된다

theme = Theme.of(context);
size = MediaQuery.of(context).size;

아래와 같이 Size, ThemeData 파일을 생성해 주면 어디에서든 접근할 수 있게 된다

_constant/widgets/theme.dart

import 'package:flutter/material.dart';

late Size size;
late ThemeData theme;

MaterialApp의 home 속성에 넣은 .dart 파일의 build 아래에 아래와 같이 작성한다

이렇게 되면 앱의 어느 부분에서나 사용이 가능함

null safety 이전 이라면 null check를 해줘야 error가 나지 않는다(잘 기억안남)

main_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_goffer/_constant/widgets/theme.dart';

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    size = MediaQuery.of(context).size;
    theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Font 테스트'),
      ),
    );
  }
}
profile
Flutter Developer

0개의 댓글