Photo by Laura Chouette on Unsplash

Flutter’da ThemeData ile Temayı ve Fontları Değiştirmek | Cookbook Serisi

Videolu anlatım kanalımda: https://www.youtube.com/watch?v=zy8A18UPa8U&list=PLNRtC6HXL3EDnn4naNGqlQSFqGyMXXWow&index=62

Orijinal cookbook: https://flutter.dev/docs/cookbook/design/themes

MaterialApp’in theme parametresine ThemeData() widget vererek uygulamanın bütününü kapsayan temalar tanımlayabilir veya Theme() widget ile belirli widget'lar için renkleri ve yazı tipi stillerini değiştirebilirsiniz. Bir tema tanımladıktan sonra; AppBar, Düğmeler, Onay Kutuları gibi bir çok widget'ta vurgu renklerini, arka plan renklerini ve yazı tipi stillerini ayarlamak için kullanılabilir.

Uygulama teması oluşturma:

theme verilmediyse, Flutter sizin için varsayılan bir tema oluşturur.

MaterialApp(
  title: title,
  theme: ThemeData(
    // Varsayılan olarak ayarlanan parlaklık ve renkler.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
    // Varsayılan olarak ayarlanan yazı tipi.
    fontFamily: 'Georgia',
    // Başlıklar ve metinler için varsayılan metin tasarımı.
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  )
);

ThemeData içinde tanımlayabileceğiniz tüm parametreleri görmek için belgelere bakın: https://api.flutter.dev/flutter/material/ThemeData-class.html

Bir widget’a özel tema oluşturmak için:

Uygulamadaki bazı widget’lara farklı tema uygulamanın iki yolu vardır:

* Birincisi; varsayılan temayı geçersiz kılmak.

* İkincisi; ana temayı genişletmek.

*Varsayılan temayı geçersiz kılmak için:

Widget’ı, Theme() widget ile sararız. Sonra child’ına, temasını değiştirmek istediğimi widget’ı veririz.

data parametresine de, ThemeData() widget ile değiştirmek istediğimiz özelliği veririz. Örnekte, accentColor’ı değiştirdik.

Bu yöntemde ana temanın accentColor özelliğini geçersiz kılmış ve yenisi tanımlamış olduk.

Theme(
  data: ThemeData(
    accentColor: Colors.yellow,
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
),

*Ana temayı genişletmek için:

Üstteki geçersiz kılma yöntemi yerine, aynı sonucu elde etmek için ana temayı ilgili widget’ın özelliklerini değiştirmek üzere genişletebiliriz. Bunu copyWith() yöntemi ile yapıyoruz.

Theme(
  /* Widget ağacında theme'in yerini buluyor ve temasını 
  değiştirmek istediğimiz widget için theme özelliklerini 
  genişletiyor. */
  data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);

Temayı Kullanma:

Yukarıdaki Theme.of(context) yöntemini kullanarak diğer widget'ları da şu şekilde özelleştirebiliriz.

Text’in style parametresini aktifleştirdik ve MaterialApp’in theme parametresine tanımladığımız headline6'nın özelliklerini almasını istedik.

Container(
  color: Theme.of(context).accentColor,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.headline6,
  ),
);

Cookbook’daki Örnek:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = 'Custom Themes';
    return MaterialApp(
      title: appName,
      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: 'Georgia',
        // Define the default TextTheme. Use this to specify the default
        // text styling for headlines, titles, bodies of text, and more.
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
          headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
          bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
      ),
      home: MyHomePage(
        title: appName,
      ),
    );
  }
}
class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key, @required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Container(
          color: Theme.of(context).accentColor,
          child: Text(
            'Text with a background color',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
      ),
      floatingActionButton: Theme(
        data: Theme.of(context).copyWith(
          colorScheme:
              Theme.of(context).colorScheme.copyWith(secondary: Colors.yellow),
        ),
        child: FloatingActionButton(
          onPressed: null,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Video Dersteki Örnek:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.lightBlue[100],
        accentColor: Colors.red[600],
        fontFamily: 'Georgia',
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),
          headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
          bodyText2: TextStyle(fontSize: 24.0, fontFamily: 'Comic Sans MS'),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Deneme"),
        ),
        floatingActionButton: Theme(
          data: ThemeData(
            accentColor: Colors.yellow,
          ),
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.add),
          ),
        ),
        body: AnaEkran(),
      ),
    );
  }
}
class AnaEkran extends StatefulWidget {
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
class _AnaEkranState extends State<AnaEkran> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Center(
      child: Column(children: <Widget>[
        Text(
          "Yazı Tipi Denemesi",
          style: Theme.of(context).textTheme.headline6,
        ),
        Text(
          "Yazı Tipi Denemesi",
          style: Theme.of(context).textTheme.headline1,
        ),
      ]),
    ));
  }
}