Theme at ThemeData — ano ito, mga prinsipyo at pag-configure ng mga estilo

Ano ang Theme at ThemeData

ThemeData — klase na naglalaman ng kumpletong paglalarawan ng visual na estilo ng Material application. Ipinapasa ito sa MaterialApp sa pamamagitan ng parameter na theme o darkTheme at minamana ng lahat ng child widget. Ang bawat Material Design widget ay gumagamit ng ThemeData upang makuha ang mga estilo nito: mga kulay ng button, laki ng AppBar, mga estilo ng teksto, mga puwang ng card, at mga icon.

Sa pundasyon ng ThemeData ay ang ColorScheme, na tumutukoy sa mga kulay na primary, secondary, surface, error, at iba pa. Mula sa mga kulay na ito, awtomatikong kinakalkula ang mga estado (hover, focus, pressed) para sa lahat ng Material component. Halimbawa, ang ElevatedButton ay gumagamit ng primary na kulay para sa background at onPrimary para sa teksto — nang walang karagdagang configuration.

Ang widget na Theme — ay isang InheritedWidget na nagpapalaganap ng tema pababa sa widget tree. Ang anumang widget ay maaaring makuha ang kasalukuyang tema sa pamamagitan ng Theme.of(context), at lumikha ng bagong tema batay sa umiiral na may mga override na halaga sa pamamagitan ng Theme.copyWith o ThemeData.copyWith.

Konklusyon: ThemeData — ang nag-iisang source ng mga estilo ng application. Simulan ang development sa pagtukoy ng ThemeData — ito ang nagtatakda ng visual na wika ng buong proyekto at pumipigil sa mga nakakalat na estilo sa iba't ibang screen.

ColorScheme: batayan ng color palette

ColorScheme — ang pangunahing elemento ng tema sa Material 3. Pinapalitan nito ang luma nang primarySwatch at primaryColor, na nagbibigay ng kumpletong set ng mga kulay para sa lahat ng estado at component.

Ang ColorScheme ay naglalaman ng 12 pangunahing kulay: primary, onPrimary, secondary, onSecondary, surface, onSurface, error, onError, background, onBackground, outline, at shadow. Para sa bawat kulay, awtomatikong kinakalkula ang mga variant na light at dark, pati na rin ang mga kulay para sa mga estado na hover, focus, pressed, at dragged. Kapag primary lang ang tinukoy, awtomatikong bubuo ng framework ang natitirang mga kulay sa pamamagitan ng ColorScheme.fromSeed.

Ang metodo na ColorScheme.fromSeed (Material 3) ay tumatanggap ng isang base na kulay na seedColor at bumubuo ng kumpletong magkakatugmang palette batay sa algorithm ng Material Design 3. Inaalis nito ang manu-manong pagpili ng complementary at analogous na mga kulay. Sapat na ang magbigay ng isang pangunahing kulay ng brand, at ang ColorScheme.fromSeed ay lilikha ng magkakaugnay na palette para sa buong Material system.

Konklusyon: sa mga bagong proyekto gamitin ang ColorScheme.fromSeed para bumuo ng palette. Para sa Material 2 compatibility — primarySwatch. Ang ColorScheme ay ang mandatoryong minimum para sa Material 3.

Typography at TextTheme: mga font ng application

TextTheme — bahagi ng ThemeData na tumutukoy sa mga estilo ng teksto para sa lahat ng antas ng heading, subheading, body, at label. Ang Material Design ay tumutukoy ng 15 estilo ng teksto: headlineLarge, headlineMedium, headlineSmall, titleLarge, titleMedium, at iba pa.

Ang typography ay itinatakda sa pamamagitan ng GoogleFonts para sa awtomatikong pag-load ng mga font, o sa pamamagitan ng built-in na Theme.of(context).textTheme na may custom na TextStyle. Ang GoogleFonts ay nagbibigay ng daan-daang font sa pamamagitan ng package na google_fonts, na nag-cache sa kanila nang lokal pagkatapos ng unang pag-load. Alternatibo — i-embed ang mga font sa assets ng proyekto sa pamamagitan ng pubspec.yaml.

Para sa adaptibong typography, sinusuportahan ng TextTheme ang MediaQuery.textScaleFactor — kapag pinalaki ang system font, lahat ng estilo ng teksto ay proporsyonal na nags-scale. Karagdagan, maaaring itakda ang iba't ibang laki ng font para sa iba't ibang form factor sa pamamagitan ng isTest depende sa MediaQuery.size.width.

Konklusyon: tukuyin ang TextTheme sa ThemeData at gamitin ang Theme.of(context).textTheme para sa lahat ng elemento ng teksto. Tinitiyak nito ang pagkakapare-pareho ng mga font at pinapasimple ang mga pandaigdigang pagbabago sa typography.

Pagmamana at pag-override ng tema

Theme — InheritedWidget na nagpapalaganap ng tema mula sa magulang patungo sa mga anak. Ang bawat child widget ay maaaring parehong magbasa ng kasalukuyang tema sa pamamagitan ng Theme.of(context) at gumawa ng sarili nitong kopya na may mga pagbabago sa pamamagitan ng ThemeData.copyWith.

Mekanismo ng pagmamana: kung ang isang widget ay nakabalot sa Theme na may bagong data, lahat ng mga inapo nito ay nakikita ang na-override na tema, habang ang mga widget sa labas ng balot na ito ay nakikita ang orihinal. Ito ay nagbibigay-daan, halimbawa, na ihiwalay ang mga estilo para sa isang partikular na screen: ang heading ay gumagamit ng custom na tema na may binagong AppBarTheme, at ang natitirang application ay gumagamit ng pamantayan.

Ang pagpupugad ng Theme ay maaaring walang limitasyon. Gumagamit ang Flutter ng hierarchical na paghahanap: kapag tinawag ang Theme.of(context), ang framework ay umaakyat sa tree hanggang sa unang Theme at ibinabalik ang tema nito. Kung walang nakitang Theme — may itatapon na exception. Kaya naman ang MaterialApp ay palaging bumabalot ng application sa Theme.

Konklusyon: ang pagmamana ng Theme — isang flexible na mekanismo para sa paghihiwalay ng mga estilo. Gamitin ang pag-override ng tema para sa mga indibidwal na screen nang hindi nagdodoble ng pangkalahatang configuration.

Dark theme: madilim na tema ng application

Dark theme — ang built-in na kakayahan ng Flutter na lumipat sa pagitan ng maliwanag at madilim na tema. Ang ThemeData ay naka-imbak sa mga parameter na theme (maliwanag) at darkTheme (madilim) ng MaterialApp. Ang parameter na themeMode ay namamahala sa mode: ThemeMode.light (palaging maliwanag), ThemeMode.dark (palaging madilim), o ThemeMode.system (sumusunod sa mga setting ng system).

Sa pagpapatupad ng madilim na tema, hindi na kailangang lumikha ng lahat ng estilo mula sa simula. Sapat na ang magbigay ng ColorScheme.fromSeed(seedColor, brightness: Brightness.dark) sa darkTheme. Awtomatikong inaayos ng framework ang mga kulay para sa madilim na background: ang surface ay nagiging dark grey, ang teksto ay nagiging maliwanag. Ang iba pang subtheme (AppBarTheme, CardTheme, BottomNavigationBarTheme) ay minamana mula sa maliwanag na bersyon, maliban kung tahasang na-override.

Para sa maayos na paglipat sa pagitan ng mga tema, nagbibigay ang Flutter ng animation sa pamamagitan ng AnimatedTheme. Kapag nagbago ang themeMode, ang mga kulay at estilo ay na-animate, na lumilikha ng visually pleasant na paglipat. Gumagamit ang AnimatedTheme ng Duration at Curve para sa pagtatakda ng bilis ng animation.

Konklusyon: ang dark theme ay naipapatupad sa pamamagitan ng darkTheme at ColorScheme.fromSeed na may brightness: Brightness.dark. Gamitin ang ThemeMode.system para sumunod sa mga system setting ng user.

Mga halimbawa ng code na may Theme at ThemeData

Halimbawa 1 — pandaigdigang configuration ng tema sa pamamagitan ng MaterialApp gamit ang ColorScheme.fromSeed.

final ThemeData appTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.indigo,
    brightness: Brightness.light,
  ),
  appBarTheme: const AppBarTheme(
    centerTitle: true,
    elevation: 0,
  ),
  cardTheme: const CardTheme(
    elevation: 2,
    margin: EdgeInsets.all(8),
  ),
);

return MaterialApp(
  theme: appTheme,
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

Sa halimbawang ito, nilikha ang ThemeData na may Material 3, scheme ng kulay batay sa indigo, at custom na AppBar at Card na estilo. Ang useMaterial3 ay nag-a-activate ng bagong Material 3 theme system, at ang ColorScheme.fromSeed ay bumubuo ng kumpletong palette.

Halimbawa 2 — access sa tema at pag-override para sa bahagi ng application.

Widget build(BuildContext context) {
  final theme = Theme.of(context);

  return Column(
    children: [
      Text(
        'Karaniwang pamagat',
        style: theme.textTheme.headlineMedium,
      ),
      Theme(
        data: theme.copyWith(
          colorScheme: theme.colorScheme.copyWith(
            primary: Colors.orange,
          ),
        ),
        child: const SpecialSection(),
      ),
    ],
  );
}

Ang pangalawang halimbawa ay nagpapakita ng paggamit ng Theme.of(context) para sa pagbasa ng mga estilo at Theme() na may copyWith para sa pag-override ng tema sa bahagi ng tree nang hindi binabago ang pandaigdigang configuration. Ang SpecialSection sa loob ng Theme ay makakakuha ng kulay na orange primary, ang natitirang application ay nagpapanatili ng orihinal na indigo.

Konklusyon: ang pandaigdigang tema ay itinakda sa MaterialApp, access sa pamamagitan ng Theme.of(context), pag-override sa pamamagitan ng Theme na may copyWith. Para sa Material 3 gamitin ang ColorScheme.fromSeed.

Mga karaniwang pagkakamali sa pag-configure ng tema

Pagkakamali 1: paggamit ng primarySwatch sa halip na ColorScheme sa Material 3. Ang primarySwatch ay luma na at hindi suportado sa Material 3. Kapag ginamit ang useMaterial3: true na may primarySwatch, naglalabas ang Flutter ng babala. Solusyon: lumipat sa ColorScheme.fromSeed para bumuo ng palette.

Pagkakamali 2: matigas na pagtatakda ng mga kulay sa widget sa halip na gamitin ang Theme.of(context). Ang mga developer ay nagsusulat ng Colors.blue nang direkta sa Container, sa halip na primary o secondary na kulay mula sa tema. Kapag nagbago ang tema, ang mga kulay na ito ay nananatiling hindi nagbabago, lumalabag sa pare-parehong estilo. Solusyon: palaging gamitin ang Theme.of(context).colorScheme.primary o iba pang kulay mula sa tema.

Pagkakamali 3: kawalan ng darkTheme. Kung ang application ay hindi tumutukoy ng darkTheme, kapag na-activate ang madilim na tema sa device, sinusubukan ng Flutter na awtomatikong i-adapt ang maliwanag na tema, na kadalasang nagbibigay ng mababang kalidad na resulta. Solusyon: palaging magbigay ng darkTheme sa MaterialApp, kahit na ang madilim na tema ay hindi priority — ito ay mahalagang UX para sa mga user.

Pagkakamali 4: paglikha ng bagong tema sa bawat build. Kung ang ThemeData ay nilikha sa loob ng build method, ang bawat pag-rebuild ng widget ay lumilikha ng bagong tema object, sinisira ang optimisasyon ng InheritedWidget. Solusyon: ilipat ang ThemeData sa isang static na field o const constructor sa labas ng build.

Konklusyon: ang tamang tema ay nangangailangan ng sentralisadong pamamaraan. Ilipat ang ThemeData sa mga constant, gamitin ang mga scheme ng kulay mula sa tema, at palaging tukuyin ang parehong tema — maliwanag at madilim.