Mobiilikehitys Flutterilla · Oppitunti

Dynaaminen väri ja mukautuvat vaaleat/tummat teemat

Mukauta paletti käyttäjän taustakuvaan ja vaihda saumattomasti vaalean ja tumman tilan välillä.

Oppitunti 2/413 vaihetta

Dynaaminen väri ja mukautuvat vaaleat/tummat teemat on ilmainen Mobiilikehitys Flutterilla-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Mobiilikehitys Flutterilla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.

Miksi dynaamisella värillä on merkitystä

Material 3 toi käyttöön dynaamisen värin: sovelluksen paletti voidaan johtaa käyttäjän taustakuvasta (Android 12 ja uudemmat), jolloin käyttöliittymä tuntuu henkilökohtaiselta ja laitteen natiivin ilmeen mukaiselta.

Tuetuilla laitteilla järjestelmä tarjoaa taustakuvasta johdetun ColorScheme-arvon.
Vanhemmissa laitteissa tai muilla alustoilla käytetään varalla brändin siemenväriä.
Saman logiikan on tuotettava sekä vaalea että tumma värimalli.

Tässä oppitunnissa otat käyttöön dynaamisen värin, rakennat mukautuvat vaaleat ja tummat teemat ja annat järjestelmän päättää, kumpi niistä näytetään.

Siemenväri perustana

Myös dynaamista väriä käytettäessä tarvitset aina vararatkaisun. Material 3:n ColorScheme.fromSeed luo yhdestä siemenväristä täydellisen ja saavutettavan paletin.

Välitä brightness, jotta saat vastaavan vaalean tai tumman muunnelman.
Luotu värimalli takaa oikean kontrastin roolien, kuten primary- ja onPrimary-roolien, välillä.

import 'package:flutter/material.dart';

final ColorScheme lightScheme = ColorScheme.fromSeed(
  seedColor: const Color(0xFF6750A4),
  brightness: Brightness.light,
);

final ColorScheme darkScheme = ColorScheme.fromSeed(
  seedColor: const Color(0xFF6750A4),
  brightness: Brightness.dark,
);

Vaalean ja tumman ThemeDatan rakentaminen

ThemeData sisältää ColorScheme-arvon sekä typografian ja komponenttien tyylit. Material 3:a käyttäessäsi asetat useMaterial3: true ja välität värimallin sille.

Luo yksi ThemeData kutakin kirkkautta varten.
Pidä ne yhdenmukaisina johtamalla molemmat samasta siemenväristä.

ThemeData buildTheme(ColorScheme scheme) {
  return ThemeData(
    useMaterial3: true,
    colorScheme: scheme,
    appBarTheme: AppBarTheme(
      backgroundColor: scheme.surface,
      foregroundColor: scheme.onSurface,
    ),
  );
}

Tilan valitseminen järjestelmän avulla

MaterialApp hyväksyy sekä theme- (vaalea) että darkTheme-teeman. themeMode-ominaisuus määrittää, kumpi niistä on aktiivinen.

ThemeMode.system seuraa käyttöjärjestelmän asetusta automaattisesti.
ThemeMode.light / ThemeMode.dark pakottaa valitun tilan (mikä on hyödyllistä sovelluksen sisäisessä vaihtopainikkeessa).

ThemeMode.system-tilassa Flutter vaihtaa saumattomasti, kun käyttäjä ottaa tumman tilan käyttöön tai poistaa sen käytöstä laitteen asetuksissa.

MaterialApp(
  theme: buildTheme(lightScheme),
  darkTheme: buildTheme(darkScheme),
  themeMode: ThemeMode.system,
  home: const HomePage(),
);

Dynaamisen värin lukeminen järjestelmästä

dynamic_color-paketti tarjoaa taustakuvaan perustuvan paletin DynamicColorBuilder-widgetin kautta. Sen builder-funktio antaa käyttöön valinnaiset vaalean ja tumman ColorScheme-arvon.

Jos laite tukee dynaamista väriä, molemmat värimallit ovat ei-tyhjiä.
Muussa tapauksessa ne ovat null, jolloin käytät varalla siemenväriäsi.

import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart';

DynamicColorBuilder(
  builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
    final light = lightDynamic ?? lightScheme;
    final dark = darkDynamic ?? darkScheme;
    return MaterialApp(
      theme: buildTheme(light),
      darkTheme: buildTheme(dark),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  },
);

Brändivärien harmonisointi

Kun yhdistät taustakuvan dynaamiset värit brändiväriisi, ne voivat olla ristiriidassa keskenään. harmonize-apuohjelmat siirtävät mukautettua väriä kohti dynaamista primary-väriä, jotta korostusvärit muodostavat yhtenäisen kokonaisuuden.

Käytä harmonizeWith-menetelmää Color-arvolle suhteessa värimallin primary-väriin.
Näin mukautetut semanttiset värit (success, warning) pysyvät brändin mukaisina taustakuvasta riippumatta.

import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart';

ColorScheme harmonizeScheme(ColorScheme scheme) {
  return scheme.harmonized();
}

Color harmonizeBrand(Color brand, ColorScheme scheme) {
  return brand.harmonizeWith(scheme.primary);
}

Väriroolit, ei kiinteästi määritettyjä heksavärejä

Jotta teemat voivat mukautua, widgettien on luettava semanttiset roolit lausekkeella Theme.of(context).colorScheme kiinteästi määritettyjen värien sijaan.

scheme.primary ja scheme.onPrimary korostettuja toimintoja varten.
scheme.surface ja scheme.onSurface taustoja ja tekstiä varten.
scheme.surfaceContainerHighest hienovaraisia kortteja varten.

Koska nämä roolit vaihtuvat kirkkauden mukaan, widgetit mukautuvat automaattisesti vaaleaan ja tummaan tilaan.

Widget buildCard(BuildContext context) {
  final scheme = Theme.of(context).colorScheme;
  return Container(
    color: scheme.surfaceContainerHighest,
    child: Text(
      'Adaptive',
      style: TextStyle(color: scheme.onSurface),
    ),
  );
}

Pelkkä Dart: värimallin valitseminen kirkkauden perusteella

Logiikka, jolla valitaan käytettävä värimalli, on tavallista Dartia. Tässä on pieni suoritettava malli varasäännöstä: suosi dynaamista värimallia ja käytä muussa tapauksessa siemenestä johdettua värimallia.

Tämä vastaa lightDynamic ?? lightScheme -mallia.
Flutter-widgetteja ei tarvita — ainoastaan valintalogiikka.

enum Brightness { light, dark }

String chooseScheme({
  required Brightness brightness,
  required bool supportsDynamic,
}) {
  final base = supportsDynamic ? 'dynamic' : 'seed';
  return '$base-${brightness.name}';
}

void main() {
  print(chooseScheme(brightness: Brightness.dark, supportsDynamic: true));
  print(chooseScheme(brightness: Brightness.light, supportsDynamic: false));
}

Teeman vaihtaminen sovelluksen sisällä

Käyttäjät haluavat usein ohittaa järjestelmän asetuksen. Tallenna ThemeMode tilaan ja välitä se MaterialApp-komponentille. ValueNotifier on kevyt tapa käynnistää uudelleenrakennus muutoksen yhteydessä.

Käytä oletuksena arvoa ThemeMode.system, jotta taustakuva ja tumma tila vaikuttavat edelleen.
Anna vaihtopainikkeen valita vaalea, tumma tai takaisin järjestelmän tila.

final themeModeNotifier = ValueNotifier<ThemeMode>(ThemeMode.system);

ValueListenableBuilder<ThemeMode>(
  valueListenable: themeModeNotifier,
  builder: (context, mode, _) {
    return MaterialApp(
      theme: buildTheme(lightScheme),
      darkTheme: buildTheme(darkScheme),
      themeMode: mode,
      home: const HomePage(),
    );
  },
);

Tehokkaaseen kirkkauteen reagoiminen

Widgeteissä on joskus tarpeen tietää, mikä tila parhaillaan näytetään (esimerkiksi eri kuvituksen valitsemista varten). Lue tieto aktiivisesta teemasta, älä laitteesta, koska sovelluksen sisäinen vaihtopainike voi ohittaa järjestelmän asetuksen.

Theme.of(context).brightness ilmaisee ratkaistun teeman.
Vältä MediaQuery.platformBrightnessOf-arvoa, jos vaihtopainike voi ohittaa sen.

Widget heroImage(BuildContext context) {
  final isDark = Theme.of(context).brightness == Brightness.dark;
  return Image.asset(
    isDark ? 'assets/hero_dark.png' : 'assets/hero_light.png',
  );
}

Molempien tilojen nopea testaaminen

Tarkista käyttöliittymäsi aina molemmilla värimalleilla ennen julkaisua. Kaksi käytännöllistä tapaa:

Vaihda tummaa tilaa laitteen tai emulaattorin asetuksissa ja varmista, että ThemeMode.system reagoi.
Pakota väliaikaisesti käyttöön themeMode: ThemeMode.dark, jotta löydät kiinteästi määritetyt värit ja heikon kontrastin tekstin.

Yleisiä virheitä ovat esimerkiksi kiinteästi määritetty Colors.black-teksti, joka katoaa tummalla pinnalla, tai mukautettu korostusväri, jota ei ole koskaan harmonisoitu dynaamisen paletin kanssa.

Pikatarkistus: themeMode-arvon valitseminen

Haluat sovelluksesi mukautuvan automaattisesti käyttäjän taustakuvaan perustuviin dynaamisiin väreihin JA noudattavan käyttöjärjestelmän vaaleaa tai tummaa tilaa, mutta haluat myöhemmin sallia myös sovelluksen sisäisen ohituksen. Mikä on oikea perusmääritys?

Vastaa interaktiivisessa oppitunnissa

Yhteenveto: mukautuva Material 3 -teemoitus

Rakensitte paletin, joka mukautuu sekä taustakuvaan että kirkkauteen:

Siemenen vararatkaisu: ColorScheme.fromSeed vaaleaa ja tummaa tilaa varten, kun dynaaminen väri ei ole käytettävissä.
Dynaaminen väri: DynamicColorBuilder tarjoaa taustakuvaan perustuvat värimallit, ja ?? seedScheme toimii vararatkaisuna.
Harmonisointi: sekoittakaa brändin ja mukautetut värit kohti dynaamista pääväriä.
Semanttiset roolit: lukekaa colorScheme-rooleja kiinteästi määritettyjen heksavärien sijaan, jotta widgetit vaihtuvat automaattisesti.
Tilan hallinta: käyttäkää oletuksena arvoa themeMode: ThemeMode.system ja halutessanne ValueNotifier-vaihtokytkintä.

Mukautukaa käyttäjän mukaan, käyttäkää hallittuja vararatkaisuja ja älkää koskaan määrittäkö kiinteästi väriä, jonka voisitte lukea värimallista.

Aloita maksutta

Opi Dart tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 22
Oppitunnit: 88

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Dynaaminen väri ja mukautuvat vaaleat/tummat teemat” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Mobiilikehitys Flutterilla-oppimispolun 3 oppituntia, myös oppitunnin “Dynaaminen väri ja mukautuvat vaaleat/tummat teemat”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Dynaaminen väri ja mukautuvat vaaleat/tummat teemat”?

Mukauta paletti käyttäjän taustakuvaan ja vaihda saumattomasti vaalean ja tumman tilan välillä. Harjoittelet Mobiilikehitys Flutterilla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Mobiilikehitys Flutterilla-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Mobiilikehitys Flutterilla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Dynaaminen väri ja mukautuvat vaaleat/tummat teemat”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Mobiilikehitys Flutterilla-oppitunnilla?

Kyllä. Jokainen Mobiilikehitys Flutterilla-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Material 3 -väriteemat ja siemenvärit
Dynaaminen väri ja mukautuvat vaaleat/tummat teemat
Mukautettu ThemeExtension brändin design-tokeneille
Responsiivinen typografia ja komponenttien teemoitus

← Takaisin: Mobiilikehitys Flutterilla