Flutter’da Açılış Ekranı: Splash Screen

FLUTTER 0 Yorum

Bu içerikte,  Flutter mobil uygulamanızda Açılış Ekranının nasıl oluşturulacağını öğreneceğiz.

Uygulamaya başlamadan önce aşağıdaki kodu bilgisayarınızda bulundurabilirsiniz, böylelikle sürekli varsayılan kodları düzenlemek ile uğraşmazsınız.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Projem',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: ,
    );
  }
}

Açılış Ekranı nedir?

Açılış ekranı, uygulamanızın ilk açılışında ekranda kullanıcıya boş bir ekranla karşılamak yerine hazırlayacağınız tasarım ile karşılamanızı sağlayan bir geçiş ekranıdır. Bir uygulamayı açarken kimse beyaz, boş bir ekran görmeyi sevmez, öyle değil mi? Öyleyse, Flutter ile oluşturulmuş mobil uygulamanız için bir açılış ekranı oluşturarak nasıl profesyonel görüneceğini öğrenelim.

Uygulamanın yapımına başlarken ilk olarak pubspec.yaml dosyasını açın ve aşağıdaki örnekte gösterildiği gibi  “splashscreen”  paketini ekleyin.

dependencies:
  flutter:
    sdk: flutter
  splashscreen: ^1.3.5

Yukarıda “splashscreen” paketini ekledikten sonra kayıt edip main.dart dosyasını açın.

Açılış Ekranını Özelleştirme

Uygulamanızın açılış ekranının üzerinde metin ve görselle görüntülemesini sağlamak için,  oldukça özelleştirilebilir olan SplashScreen widget’ını kullanacağız. Önce aşağıdaki kodlara bakalım ve ardından ne işe yaradıklarını öğrenelim.

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 14,
      navigateAfterSeconds: new AfterSplash(),
      title: new Text('Açılış Ekranına Hoşgeldiniz!',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 20.0
      ),),
      image: new Image.network('https://onursahin.net/wp-content/uploads/2021/01/c6dae25c982ce81623b3f363bd4a7291.png'),
      backgroundColor: Colors.white,
      styleTextUnderTheLoader: new TextStyle(),
      photoSize: 200.0,
      loaderColor: Colors.black
    );
  }
}

Yukarıda , aşağıdaki özelliklere sahip bir SplashScreen widget’ı kullanan basit bir uygulama oluşturduk.

  • seconds: Açılış ekranının kaç saniye gösterileceği
  • navigateAfterSeconds: Açılış ekranından sonra yönlendirmek istediğiniz widget
  • title: Açılış ekranında göstermek istediğiniz başlık
  • style: Başlığın veya açılış ekranındaki herhangi bir metnin stilini ayarlamak için
  • image: Açılış ekranında göstermek istediğiniz görsel
  • backgroundColor: Açılış ekranın arka plan rengi
  • photoSize: Görselin boyutu
  • loaderColor:Açılış ekranı etkinken gösterilen yükleyicinin (CircularProgressIndicator()) rengi

Yukarıdaki kod örneğini bir emülatörde çalıştırırsanız, uygulama açılış ekranı aşağıdaki görselde gösterilen gibi görünecektir.

splashscreen
splashscreen

Tam Kod Örneği

Aşağıda, çalıştırmanız ve nasıl çalıştığını görmeniz için eksiksiz bir kod örneği verilmiştir. Emülatörde çalıştırdığınızda bu içerikte oluşturduğumuz açılış ekranını gösterecektir.

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

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
        seconds: 5,
        navigateAfterSeconds: new AfterSplash(),
        title: new Text(
          'Açılış Ekranına Hoşgeldiniz!',
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
        ),
        image: new Image.network(
            'https://onursahin.net/wp-content/uploads/2021/01/c6dae25c982ce81623b3f363bd4a7291.png'),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: new TextStyle(),
        photoSize: 200.0,
        loaderColor: Colors.black);
  }
}

class AfterSplash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new Text("Anasayfa"), automaticallyImplyLeading: false),
      body: new Center(
        child: new Text(
          "Ana Sayfa",
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}

Umarım bu Flutter öğreticisi sizin için yararlı olmuştur. Kodları indirmek için github hesabımı ziyaret edebilirsiniz.

Flutter 🙂 ile mutlu mobil uygulama geliştirmeler!

Yorum Yap