Flutter에서 테마를 사용하여 색상과 글꼴 스타일을 공유하는 방법은 무엇입니까?

Flutter는 Google에서 만들고 2017년 5월에 출시한 모바일 장치용 무료 오픈 소스 UI 프레임워크입니다. 간단히 말해서 Flutter를 사용하면 단일 코드 조각으로 기본 모바일 앱을 만들 수 있습니다.

결과적으로 하나의 코드 세트와 하나의 도구 세트(iOS 및 Android용)만으로 두 개의 개별 앱을 설계할 수 있습니다. Flutter Agency와 같은 최고의 Flutter 앱 개발 회사가 앱 디자인을 도와주는 다양한 에이전시가 있습니다.

Dart is the programming language Flutter로 작업해야 합니다. Google은 2011년 10월에 이 언어를 처음 개발했지만 그 사이 몇 년 동안 크게 발전했습니다.

프런트 엔드 개발에 중점을 둔 Dart로 모바일 및 웹 앱을 만들 수 있습니다. Dart는 프로그래밍 경험이 있는 경우 유형이 지정된 개체 프로그래밍 언어입니다. Dart의 구문은 JavaScript의 구문과 유사합니다.

Flutter의 테마는 무엇인가요?

Flutter 앱의 테마를 활용하여 앱 전체에서 색상과 글꼴 스타일을 공유할 수 있습니다. Flutter에서는 두 가지 방법으로 정의할 수 있습니다. 색 구성표와 글꼴 스타일은 시스템 전체에 적용하거나 테마 위젯을 통해 특정 프로그램 섹션에 적용할 수 있습니다.

앱 전체 테마에 관해서는 MaterialApp이(가) 생성을 담당합니다! 위젯에서 테마를 사용하기 전에 테마를 만들어야 합니다. 앱 바, 버튼, 확인란 및 기타Material Widgets는 테마를 사용하여 배경색과 글꼴 스타일을 변경합니다.

Flutter 앱 테마 만들기:

앱의 색상과 글꼴을 전체적으로 일관되게 만들려면 ThemeData를 MaterialApp 함수 Object() { [네이티브 코드] }로 보내야 합니다. Flutter는 테마가 제공되지 않으면 자동으로 기본 테마를 생성합니다.

MaterialApp(
title: title,
theme: ThemeData(
// Define the default Brightness and Colors
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
// Define the default Font Family
fontFamily: 'Montserrat',
// Define the default TextTheme. Use this to specify the default
// text styling for bodies of text, titles, headlines, etc.
textTheme: TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline2: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),),
)
);

Flutter 앱 테마를 사용하는 것은 앱의 기능입니다.

ThemeWidget을 사용하여 앱의 영역을 둘러싸고 앱 전체 테마를 재정의할 수 있습니다.

자체 ThemeData를 생성하거나 이를 달성하기 위해 상위 테마를 확장할 수 있습니다.

Flutter 앱의 ThemeData를 고유하게 만드는 방법:

색상이나 글꼴 스타일과 같은 현재 응용 프로그램 속성을 상속하지 않으려면 ThemeData() 개체를 구성하고 테마 위젯에 제공할 수 있습니다.

Theme(
// Create a unique theme with "ThemeData"
data: ThemeData(
accentColor: Colors.yellow,
),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);

Flutter 앱: 상위 테마 확장

모든 것을 재정의하는 것보다 상위 테마를 확장하는 것이 상식입니다. 기술이 포함된 사본을 사용하여 이를 수행할 수 있습니다.

Theme(
// Search and Enhance the main theme using "copyWith". Please see the next
// section for more info on `Theme.of`.
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
),
);

Flutter의 테마 기반 속성 공유:

Theme.of(context)는 정의된 테마를 적용하기 위해 Widget 구성 방법에 사용될 수 있습니다! Theme.of(context)는 위젯 트리를 검색하고 위젯 계층 구조에서 현재 위치에 가장 가까운 테마를 반환합니다.

위젯 위에 지정된 다른 테마가 있는 경우 이를 얻습니다. 일치하지 않으면 앱 테마로 돌아갑니다. 우리 모두는 부동 작업 버튼이 강조 색상을 선택하는 정확한 메커니즘을 사용한다는 것을 잘 알고 있습니다.

Container(
color: Theme.of(context).colorScheme.secondary,
child: Text(
'Welcome',
style: Theme.of(context).textTheme.headline2,
),
);

테마를 사용하여 색상과 글꼴 스타일을 공유하는 Flutter는 아래 코드에서 볼 수 있습니다.

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const appName = 'Custom Themes';
return MaterialApp(
title: appName,
theme: ThemeData(
// Define the default Brightness and Colors
brightness: Brightness.light,
primaryColor: Colors.lightBlue[800],
// Define the default Font Family
fontFamily: 'Montserrat',
// Define the default TextTheme. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: const TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline2: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Display Text using theme class"),
),
body: Center(
child: Container(
color: Theme.of(context).colorScheme.secondary,
child: Text(
'Welcome',
style: Theme.of(context).textTheme.headline2,
),
),
),
floatingActionButton: Theme(
data: Theme.of(context).copyWith(splashColor: Colors.yellow),
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
),
);
}
}

산출:

결론

이 기사에서는 테마를 사용하여 Flutter에서 색상 및 글꼴 스타일을 공유하는 방법을 보여주었습니다. 도움이 되었기를 바랍니다.

Flutter 개발 지원은 어떻습니까? Flutter 기술 및 Flutter 개발자 전용 Flutter Agency는 모든 것을 위한 관문 플랫폼입니다. Flutter Widget Guide 및 Flutter 팀의 기타 유용한 자료 외에도.

도움이 필요한 경우 Flutter Agency에서 경력Flutter experts을 고용할 수 있습니다. 매일 우리는 Flutter와 그 응용 프로그램에 대해 더 알고 싶어하는 수천 명의 고유 방문자를 끌어들입니다.