Flutter Ile Background Image Kullanarak Ekran Tasarımı

Mobil uygulamalarda ekranın arka planında belli belirsiz resim kullanımı nedense çok hoşuma gidiyor ve çok yakıştığını düşünüyorum. Bende firmamızda geliştirmekte olduğum bir mobil uygulamada böyle bir tasarım yaptım ve bunu flutter ile ne kadar kolay yaptığımı aşağıdaki kodlara baktığınızda göreceksiniz.

Yazılar Hakkında Önbilgi:

Widgetlar hakkında çok detaya girmeyeceğim açıkcası. Çünkü dökümantasyonunda çok güzel anlatılmış ve internette de çok fazla sayıda makale mevcut. O yüzden ben genelde kendi geliştirdiğim yapıları nasıl yaptığımı, nerde neyi neden kullandığımı kısaca anlatarak biraz daha nokta bilgiler vermeyi planlıyorum.

Kullandığım Resim ve Ortaya Çıkan Ekran:

mainBackground.jpg

Nasıl Yaptım?

Öncelikle işe ekranın boyutlarını alarak başladım. Kullanacağım resmi buna göre boyutlandırıp konumlandırmam gerekiyordu. Bu resmi konumlandırdığım nesne tabiki bir Container oldu. Ekran boyutları kadar bir Container oluşturdum ve decoration özelliğine bir BoxDecaration widgetı bağladım. Kullandığım resmi özellikle siyah beyaza çevirdim ki üzerinde istediğim rengi kullanabileyim diye. Bu widgetın color özelliğine firmamızın kullandığı(daha önceden farklı bir dosyada tanımladığım bir Color nesnesi) mavinin bir tonu olan Color nesnesini verdim. Daha sonra image özelliğine de bir DecorationImage nesnesi verdim. İşte siyah beyaz resme hayat verecek olan işlem burada. Bu nesnenin de bir image özelliği var ve buna siyah beyaz olan resmi gösterdim. colorFilter özelliği ile de opacitysini hafif makyajladıktan sonra fit özelliği ile ekrana oturtup resmi mavi tonunda renklendirmiş oldum. Bu widgetı ayrı bir dosyaya çekerek kendi widgetımı oluşturabilirim ve böylece resmi istediğim renk tonlarıyla istediğim sayfada background olarak kullanabilirim :)

Kodlara aşağıdan, ayrıca Container widgetı hakkında detaylı bilgiye dökümantasyondan ulaşabilirsiniz: https://api.flutter.dev/flutter/widgets/Container-class.html

Görüşmek üzere…

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Container(
      width: screenSize.width,
      height: screenSize.height,
      decoration: BoxDecoration(
        color: WColor.WGR_BLUE,
        image: DecorationImage(
          colorFilter: ColorFilter.mode(
              Colors.black.withOpacity(0.1), BlendMode.dstATop),
          image: AssetImage('asset/img/mainBackground.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}