11- Flutter Sayfa Ekleme

Merhaba Arkadaşlar;

Bir önceki dersimizde Stateless Sayfa oluşturduk. Kodlarımızın hepsini aynı sayfa üzerinde yaptık. Ancak bizim bir sürü sayfamız olacaktır. Bütün kodlarımızı aynı sayfa içerisine yazmak anlamsız.

iki sayfamız olsun. Ben aşağıdaki gibi isimlendirdim.

Uygulamamız main.dart dosyası üzerinden açılacak. Ben ilave olarak design.dart diye bir sayfa oluşturdum. Artık tasarımımı design.dart sayfasında yapıyorum ve main içerisindeki kod kalabalığından kurtuluyorum.

Biz main.dart dosyamızda yine runApp çalıştırma fonksiyonumuzun içerisine MaterialApp Widget’ını koyuyoruz. Aslında hiç birşey değişmedi. Daha önce MaterialApp içerisinde home: parametresine bir Scaffold Widget verip, AppBar, body ekleyip tasarımımızı yapıyorduk. Bu ilk sayfa oluşturma dersimizdi.

İkinci dersimizde bir StatelessWidget sayfası yaptık. Bir sınıf oluşturduk adınada AnaSayfa demiştik. Bu sınıfı extends ile StatelessWidget’tan kalıtarak özelliklerini aldık ve AnaSayfa’mızda bir widget olmuştu. AnaSayfa sınıfımızın içerisinde de mecburi override ettiğimiz build metodu geriye bir widget döndürmek zorundaydı. Bizde MaterialApp Widget’ını return etmiştik. Yine MaterialApp içerisinde tasarımımızı da yaptık. Kısacası bizim AnaSayfa Widget’ımız geriye bir MaterialApp döndürüyordu ve içerisinde tasarım vardı. runApp içerisinede AnaSayfa widget’ımızı vermiştik.

Şimdi burada design.dart isminde ayrı bir sayfa oluşturduk. main.dart içerisine import ediyoruz.

design.dart dosyamızın içerisinde AnaSayfa diye bir class oluşturuyorum ve StatelessWidget’tan extends ile özelliklerini alıyorum.

Bu sefer AnaSayfa sınıfımın içerisindeki mecburen override ettiğim, geriye bir widget döndürmek zorunda olan metoduma bir tasarım yaptığım Scaffold’u döndürüyorum.

import 'package:flutter/material.dart';

class AnaSayfa extends StatelessWidget{
  const AnaSayfa({super.key});

  @override 
//geriye widget döndüren metod
//StatelessWidget'tan geliyor
//bende tasarım yaptığım Scaffold'u return ettim.

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Sayfa Ekleme"),),
      body: const Center(child: Text("Merhaba Flutter",style: TextStyle(fontSize: 45),)),

    );
  }
}

Yukarıdaki sayfa benim design.dart sayfam. Şimdi main.dart sayfama dönüyorum ve bu sayfayı orada import ediyorum.

main.dart sayfamda runApp içerisine MaterialApp widget’ını veriyorum ve home: parametresine design.dart içerisinde bulunan AnaSayfa Widget’ımı veriyorum. Hepsi bu… Altta main.dart dosyamın içeriği verilmiştir.

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

void main (){
  runApp(const MaterialApp(
    home: AnaSayfa(),
  ));
}

Sonraki yazımızda görüşmek üzere, Hoşçakalın…