close

ThemeData 및 사용자 지정 Styles 으로 UI 서식 지정 Flutter

에서 를 Flutter 사용하여 애플리케이션의 모양과 느낌을 포맷 ThemeData 하고 사용자 정의 할 수 있습니다 styles. 전체 응용 프로그램의 주요 색상, 글꼴 등 ThemeData 을 정의하는 속성을 포함하는 클래스입니다. 사용자 지정 스타일을 사용하면 각 특정. 다음은 사용 및 사용자 지정 방법 에 대한 자세한 지침입니다. styles padding styles Widget ThemeData Styles Flutter

ThemeData

에서 는 Flutter 전체 응용 프로그램에 대한 ThemeData 기본 색상, 글꼴 모음 및 기타 여러 스타일 옵션을 정의하는 특성을 포함하는 클래스입니다. padding 를 사용하면 ThemeData 각 개별 항목을 수정하지 않고도 앱의 전체 모양을 빠르게 변경할 수 있습니다 Widget.

공통 속성 ThemeData:

  • primaryColor: 앱바, 버튼 등 앱의 주요 요소에 대한 기본 색상입니다.
  • accentColor: FloatingActionButton과 같은 UI의 보조 요소 또는 강조 표시에 대한 강조 색상입니다.
  • backgroundColor: 전체 앱의 배경색입니다.
  • textTheme styles: 제목, 본문 텍스트 등과 같은 앱의 다양한 텍스트 요소에 대한 기본 텍스트를 정의합니다.
  • textTheme.headline1: 제목 수준 1의 텍스트 스타일입니다.
  • textTheme.headline2: 제목 수준 2의 텍스트 스타일입니다.
  • textTheme.bodyText1: 본문 텍스트의 텍스트 스타일입니다.
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

맞춤 스타일

사용자 지정을 사용 Styles 하면 각각의 특정 스타일을 사용자 지정할 수 있습니다 Widget. Text, Container, RaisedButton 등과 같은 Widget의 속성을 사용하여 글꼴, 색상, 텍스트 크기 및 기타 다양한 속성을 style 변경할 수 있습니다. padding

TextStyle의 일반 속성(텍스트 위젯에 사용됨):

  • fontSize: 글꼴 크기입니다.
  • fontWeight: 글꼴 두께입니다.
  • color: 텍스트 색상입니다.
  • fontStyle: 굵게, 기울임꼴 등의 글꼴 스타일입니다.
  • letterSpacing: 문자 사이의 간격입니다.
  • wordSpacing: 단어 사이의 간격입니다.
  • decoration: 밑줄, 취소선 등의 텍스트 장식입니다.

사용자 지정을 사용하는 예 Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

사용 Themes 및 Styles 함께 MediaQuery

Themes 와 Styles 를 결합하여 MediaQuery 화면 크기 또는 장치 해상도에 따라 UI를 조정할 수 있습니다.

예:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

결론:

Flutter 애플리케이션의 UI 형식을 지정하는 강력한 도구를 제공합니다. 를 사용 ThemeData 하고 사용자 정의하면 Styles 색상, 글꼴, 텍스트 크기 등과 같은 UI 요소를 쉽게 조정하여 아름답고 매력적인 앱 인터페이스를 만들 수 있습니다.