ThemeData, bir uygulamanın genel görünümünü ve hissini yönetmek için kullanılan bir Flutter sınıfıdır. Bu makalede, Flutter ThemeData’nin ne olduğunu ve nasıl kullanıldığını öğreneceğiz.

Flutter ThemeData Nedir?

Flutter ThemeData, uygulamanın genel görünümü ve hissi için renk paletleri, yazı tipleri, gölgeleme, buton stilleri, ikonlar ve daha birçok özellik gibi temel ayarları belirler. ThemeData, uygulamanın farklı widget’ları için kullanılabilen bazı özellikler içerir. Örneğin, uygulama genelinde kullanılacak olan rengi belirleyebilir veya belirli bir widget için özelleştirilmiş bir yazı tipi belirleyebilirsiniz.

Flutter ThemeData Özellikleri Nelerdir?

Flutter ThemeData’nin temel özellikleri şunlardır:

1. primaryColor: Uygulamanın ana rengi. Varsayılan olarak, uygulama çubuğu, gösterge çubuğu ve birkaç widget için kullanılır.
2. accentColor: İkincil renk. Örneğin, floating action button için kullanılır.
3. scaffoldBackgroundColor: Scaffold widget’ının arka plan rengi.
4. fontFamily: Uygulamanın yazı tipi ailesi. Varsayılan olarak, Roboto’dur.
5. textTheme: Uygulamanın yazı tipi boyutları, ağırlıkları ve stilleri gibi özellikleri belirler.
6. buttonTheme: Uygulamadaki tüm butonlar için stil özelliklerini belirler.

Flutter ThemeData Kullanımı

Flutter ThemeData, MaterialApp veya Theme widget’ları aracılığıyla kullanılabilir. MaterialApp widget’ı, uygulamanın temel widget’ıdır ve genel uygulama temasını yönetir. ThemeData’yi kullanarak, uygulama genelinde kullanılacak temel renkler, yazı tipleri ve diğer özellikleri belirleyebilirsiniz. Aşağıdaki örnekte ThemeData kullanarak, uygulama genelinde kullanılacak temel renkleri belirleyeceğiz:

MaterialApp(
  title: 'MyApp',
  theme: ThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.green,
    scaffoldBackgroundColor: Colors.white,
    fontFamily: 'Open Sans',
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      headline2: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      bodyText1: TextStyle(fontSize: 16),
      bodyText2: TextStyle(fontSize: 14),
    ),
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.blue,
      textTheme: ButtonTextTheme.primary,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red),
      ),
    ),
  ),
  home: MyHomePage(),
);

Yukarıdaki örnekte, RoundedRectangleBorder sınıfı kullanılarak buton şekli belirlenir. borderRadius özelliği, butonun köşelerinin yuvarlatılmasını sağlar. side özelliği, butonun kenar rengini belirler.