close

Форматирование пользовательского интерфейса с помощью ThemeData и Custom Styles in Flutter

В Flutter вы можете отформатировать внешний вид вашего приложения, используя ThemeData и настроить файл styles. ThemeData — это класс, содержащий свойства для определения доминирующего цвета styles, шрифтов padding и т. д. для всего приложения. Пользовательский стиль позволяет настроить styles для каждого конкретного файла Widget. Вот подробные инструкции по использованию ThemeData и Custom Styles in Flutter:

ThemeData

In Flutter — ThemeData это класс, содержащий атрибуты для определения основного цвета, семейства шрифтов padding и многих других параметров стиля для всего приложения. Используя ThemeData, вы можете быстро изменить общий вид вашего приложения, не изменяя каждый отдельный элемент Widget.

Общие атрибуты ThemeData:

  • primaryColor: основной цвет основных элементов приложения, таких как панель приложения, кнопки и т. д.
  • accentColor: цвет акцента для второстепенных элементов или выделения в пользовательском интерфейсе, например FloatingActionButton.
  • 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. Используя style такие атрибуты виджетов, как Text, Container, RaisedButton и т. д., вы можете изменить шрифт, цвет, размер текста padding и другие различные атрибуты.

Общие атрибуты TextStyle(используются для текстового виджета):

  • fontSize: размер шрифта.
  • fontWeight: вес шрифта.
  • color: цвет текста.
  • fontStyle: стиль шрифта, например полужирный, курсив.
  • letterSpacing: Расстояние между символами.
  • wordSpacing: интервал между словами.
  • decoration: оформление текста, например подчеркивание, зачеркивание.

Пример использования Custom 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 для настройки пользовательского интерфейса в зависимости от размера экрана или разрешения устройства.

Пример:

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 предоставляет мощные инструменты для форматирования пользовательского интерфейса вашего приложения. Используя ThemeData и настраивая Styles, вы можете легко настроить элементы пользовательского интерфейса, такие как цвета, шрифты, размеры текста и т. д., чтобы создать красивый и привлекательный интерфейс для вашего приложения.