0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #12

Gauloran' Alıntı:

merhaba mobil uygulama geliştirme serimizin 12.konusu ile devam ediyoruz bundan önceki konulara bakalım:

0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #1
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #2
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #3
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #4
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #5
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #6
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #7
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #8
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #9
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #10
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #11

devam edelim. vscode açıp yeni bir flutter application projesi oluşturuyoruz yine klasörleyerek dart ile ilgili çalışmalarda yaptığımız gibi biraz derli toplu ilerlemek daha mantıklı. bu konudaki kodlamalar asla bir standarda oturulmamıştır bu nedenle işi bilenler varsa çıkıp bu stil kodları burada verilmez bunlar yanlış gibi bir düşünceye kapılabilir fakat amacımız öğrenmek olduğu için şimdilik kodlamalarımıza bir standart getirmiyoruz ama nasıl getirileceğinden de bahsedeceğim tabiki normalde örneğin sizedbox verdiğimiz yerlerde elimizle proje içerisinde manuel olarak 10 30 gibi sayılar vermenin hiçbir mantığının olmadığının hepimiz farkındayız.

yeni bir proje oluşturduk

böyle bir klasör yapısı geldi tabiki bu bir flutter projesi lib klasörünün altında 101 diye bir klasör açalım ama ondan önce main.dart ile ilgili birkaç şeyden bahsedeyim

her şey main.dart ile başlar main in altında runApp den itibaren proje hayata geçer ilk karşımıza gelen beyaz screen native tarafından gelen bir white screendir
ardından proje başladıktan sonra

Kod:

import 'package:flutter/material.dart';
import 'package:myproject/101/app_bar.dart';
import 'package:myproject/101/button_learn.dart';
import 'package:myproject/101/icon_learn.dart';
import 'package:myproject/101/scaffold_learn.dart';

void main() {
  runApp(const MyApp());

 
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false, //debug bannerini kaldırdım
      theme: ThemeData.dark().copyWith(
        //! ThemeData.dark olsun ama () içerisine verdiklerim şeklinde olsun onlar da öyle ayarlansın copyWith buna yarıyor
        appBarTheme: const AppBarTheme(
          centerTitle: true,
          backgroundColor: Colors.transparent,
          elevation:
              0, //! misal şimdi böyle ayarladıktan sonra artık yeni bir sayfa oluşturup appbar kullandığımızda o appbara tekrar tekrar stil vermemize gerek kalmayacak olay bu aslında
        ),
      ),
      /* bunu theme: in karşısında kullanabiliriz bu şekilde detaylı vermek için
    ThemeData(
        tema ile ilgili ayarları yapabiliyoruz
        primarySwatch: Colors.blue,
      ),
     */
      home: const IconLearnView(),
    );
  }
}

/*
cupertino kompanentlerini kullanabiliriz ios tarzı stiller istiyorsak material app tercih ediyorum ama genellikle
*/

şimdi 101 diye bir klasör oluşturup text_learn.dart diye bir dart dosyası oluşturalım ve yavaştan widgetları öğrenmeye başlayalım text widgetı en önemli widgetlardan biridir flutterda
bunu konuşmadan önce Scaffold'dan biraz daha bahsedeyim scaffold bir iskelet gibidir mobil uygulamanın yapısında bir iskelet düşünün bu iskelet appbar: body: gibi kısım kısım ayrılmıştır ve web tasarlamaya benzer bu standart yapılanmaya projemizi oturtabilirsek daha doğrusu tasarımımızı oturtabilirsek doğru işler yapmış oluruz bu nedenle scaffold en önemli widgetlarımızdan yine kemik iskelet yapı gibi düşünebiliriz

şimdi oluşturduğumuz text_learn.dart dosyasına dönelim ve

Kod:

import 'package:flutter/material.dart'; //sıfır bir dart dosyasında import edilmesi gerekir

//bir class oluşturuyoruz
class TextLearnView extends StatelessWidget {
  TextLearnView({super.key});

  final String name = "Ozgur";
  final ProjectKeys keys = ProjectKeys();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text(
          ('Welcome $name ${name.length}'),
          style: ProjectStyles.welcomeStyle,
          textAlign: TextAlign.left,
          maxLines: 2,
        ),
        Text(
          ('Welcome $name ${name.length}'),
          style: Theme.of(context)
              .textTheme
              .headlineSmall!
              .copyWith(color: ProjectColors.welcomeColor),
          textAlign: TextAlign.left,
          maxLines: 2,
        ),

        Text(keys.welcome), //textlerimizi bu sekilde olusturmaliyiz
      ]),
    );
  }

}

class ProjectStyles {
  static const TextStyle welcomeStyle = TextStyle(
    wordSpacing: 2,
    letterSpacing: 3,
    fontSize: 24,
    color: Colors.black,
    fontWeight: FontWeight.w600,
    decoration: TextDecoration.underline,
    fontStyle: FontStyle.italic,
  );
}

class ProjectColors {
  static Color welcomeColor = Colors.blue;
}

class ProjectKeys {
  final String welcome = "Merhaba";
}

TextLearn diye bir StatelessWidget tan türeyen bir sınıf oluşturduk
stlesswidget da widget tan türemiştir. flutter sdk sından gelen şeyler bunlar
eger bir sayfa yapiyorsak flutter tarafinda scaffold iskelettir kullanmak mantiklidir

yukarıdaki kodlarda fark edeceğiniz şey öncelikle ingilizce seviyenizin basit-orta düzeyde olması widgetların özelliklerini yani propertylerini anlamak için yeterlidir üstüne geldiğinizde zaten sizden hangi özelliğin neyi beklediğini vscode size söyleyecektir

örnek:

burada tekrar dikkatinizi çekmek istediğim nokta şu biz text widgetına style verirken
style: ProjectStyles.welcomeStyle buradan vermişiz normalde direkt oraya TextStyle diye parantez açıp text stilinin içini doldurabilirdik ama neden yapmadık?
çünkü diyelim projemizde 10 tane text widget kullandığımız yerler olacak her birine ayrı ayrı stil vermek yerine belli bir sınıf olsun stil sınıfı ki o da burada projectstyles oluyor oradan gelsin neden aynı kodu 100 kere yazalım ki bu mantıkla hareket ediyoruz ve stil dosyalarımızı başka bir yerden vereceğimiz sınıf oluşturuyoruz. aslında bunun da ileri seviyesi direkt olarak Theme.of dan çekerek de oluyor ama ondan bahsedeceğiz zaten

text_learn.dart dosyasında incelemek ve söylemek istediklerim bu kadardı şimdi Scaffold dedik dedik ondan bir bahsedelim hatta önce scaffold dan bahsetmek daha mantıklıydı belki konunun başında önce buraya gidin diye sizi yönlendirme yaparım yaptıysam buradan devam edin Scaffold u okuduktan sonra yukarıdaki text_learn.dart'a gidiverin.

Scaffold flutterın en onemli widgetlarindan biri en degerlisi olabilir
butun projelerde bir bottom alani body alani ve appbar yani header ust kisim alani vardir web sitelerinde de boyledir uygulamalarda da boyledir
flutter da bunu bir iskelete cevirelim demisler bu iskeletin adi da scaffold

Kod:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scaffold samples')),
      body: const Text('merhaba'),
      backgroundColor: Colors.red, //iskelet background rengini degistirdik
      extendBody: true, //bunu verince iyi bir sey oluyor ilerde bakacagim
      floatingActionButton: FloatingActionButton(onPressed: () {
        showModalBottomSheet(
            //bottomsheet widgeti floating action buttona onpressed metoduna yazdik yani tiklandiginda bu widget olacak
            context: context,
            builder: (context) => Container(
                height:
                    200)); //bu widget bir context bekler ve builder vermemizi ister
      }), //alt kisim butonu
      bottomNavigationBar: Container(
        width: 200,
        height:
            200, //mesela bottomnavigationbar widgetını Container ile sarmalayıp yukseklik verdik
        decoration:
            ProjectContainerDecoration(), //baska bir dosyadan aldik import edip zaten bunu yazmistik
        child: BottomNavigationBar(items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.abc_outlined),
            label: 'a',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.abc_outlined),
            label: 'b',
          ),
        ]),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation
          .centerDocked, //floatingActionButtonı ortala merkeze demek
      drawer:
          const Drawer(), //drawer soldan açılır menü widgetıdır bu kadar kolay bir şekilde flutterda
      //bottomSheet: const Text('deneme data'),
      /* bottomSheet: BottomSheet(
          onClosing: () {},
          builder: (context) {
            return Column();
          }), */
    );
  }
}

yukarıdaki kodları ve açıklamaları yanlarında yorum satırı olarak bıraktım onları incelerseniz akılda pek soru kalmaz gibi. bu arada emulatorumuzu vscode un bir eklentisini kullanarak android ios emulator eklentisini kullanarak android studio dan oluşturduğumuz emulatoru android studio'yu çalıştırmadan vscode üzerinden boyutlandırma falan yaparak kullanabiliyoruz gayet hoş belki android studio kullanmış olanınız varsa oradaki emulatorun kullanımı daha rahattı hatta bir güncellemeden sonra emulatorü sabit sekme gibi sağ tarafta falan kullanabiliyorduk rahat oluyordu bu eklenti de ona benzer şekilde ekranın bir yerine koyuyorsunuz ayarlardan da emulator always on top deyip projede ekranda boş bir yere yerleştirdiğinizde her şey tamam oluyor.

şimdi container widgetına göz atalım ve sizedbox widgetından da bahsedelim Container flutterın en gelismis ve kompleks kompanentlerinden birisidir icerisinde bir cok ekstra propertysi vardir

Kod:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          SizedBox(
            //sizedbox bir iskelet kutu oluşturur
            width: 300,
            height: 200,
            child: Text("a" * 500),
          ),

          SizedBox.shrink(), //boş bir alan için

          SizedBox.square(
            dimension: 50, //50 width 50 height demek
            child: Text('b' * 50),
          ), //kare bir alan için

          Container(
            width: 200,
            height: 200,
            //color: Colors.red, //BoxDecoration kullanildigi zaman containerin color'ını sadece bir yerde vermek gerekir o yuzden yorum satirina aldim
            constraints: const BoxConstraints(
              //icine yerlestirilen ogelerin en fazla 200 width inde olsun demisiz burada
              maxWidth: 200,
              minWidth: 50,
            ),
            padding: const EdgeInsets.all(
                8.0), //container icindeki elemanlara padding atiyoruz bosluk veriyoruz disaridan
            margin: const EdgeInsets.all(
                25.0), //containerin disina verir boslugu padding ise iceriye veriyor boslugu farki bu
            //burada BoxDecoration() diyerek bir seyler verebilirdik ama kod karmasikligini engellemek icin asagiya iki sinif olusturduk ProjectUtility ve ProjectContainerDecoration diye onlari kullanarak basitce verebiliriz buraya
            decoration: ProjectUtility.boxDecoration,
            child: Text('aa' * 100),
          ),
        ],
      ),
    );
  }
}

class ProjectUtility {
  static BoxDecoration boxDecoration = BoxDecoration(
      //alternatif olarak boxDecoration degiskenimiz BoxDecoration sinifi turunde. icerisine de BoxDecoration atiyoruz
      //ama bizim istedigimiz sekilde bir BoxDecoration koyuyoruz (:
      gradient: const LinearGradient(colors: [Colors.red, Colors.black]),
      borderRadius: BorderRadius.circular(25.0),
      color: Colors.red,
      shape: BoxShape.rectangle, //yuvarlak olsun misal containerin sekli
      border: Border.all(
        //cerceve sekli her yonden vermisiz beyaz renginde
        width: 10,
        color: Colors.white,
      ),
      boxShadow: const [
        BoxShadow(
          color: Colors.green,
          offset: Offset(0.1, 1),
          blurRadius: 12,
        )
      ]);
}

class ProjectContainerDecoration extends BoxDecoration {
  ProjectContainerDecoration()
      : super(
            //:super yani üst sınıfa git ve üst sınıftaki bazı özellikleri benim istediğim şekilde ver dedik aşağıda da verdik onları
            gradient: const LinearGradient(colors: [Colors.red, Colors.black]),
            borderRadius: BorderRadius.circular(25.0),
            color: Colors.red,
            shape: BoxShape.rectangle, //yuvarlak olsun misal containerin sekli
            border: Border.all(
              //cerceve sekli her yonden vermisiz beyaz renginde
              width: 10,
              color: Colors.white,
            ),
            boxShadow: const [
              BoxShadow(
                color: Colors.green,
                offset: Offset(0.1, 1),
                blurRadius: 12,
              )
            ]);
}

bu kodları iyi incelemek lazım inanılmaz faydalı şeyler içeriyor özellikle projectcontainerdecoration sınıfında super kullanarak üst sınıftaki bazı özelliklerin değiştirilerek verilmesi ve böylece kod karmaşasının önüne geçilmeye çalışılması epey faydalı bir örnek aslında tabi bunlar da yanlış aslında yani yanlış derken konuya daha başlamadan projeyi bir standarda oturtmak lazım muhabbetine girmiştim o açıdan söylüyorum.

şimdi appbar widgetından da bahsedelim appbar ile ilgili bilgi verelim

flutterda appbarın iskeleti yukarıdaki görseldeki gibidir hatta bir tane daha güzel görsel paylaşayım

şimdi şunları incelemeniz gerekiyor :

Kod:

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

//! appbar adamdir
//! bir ekran gelistiriyorsak title mesela appbar kısmında welcome to myapp yazılmaz oraya onu başka bir yerde tutmak gerek oyle yazmak gerek
//! simdilik soyle yapalim

const String _title = "Welcome Learn";

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(_title),
        leading: const Icon(Icons
            .chevron_left), //!sol tarafina bir seyler yerlestirmek istedigimizde kullanabiliriz
        actions: [
          //!sag tarafa bir seyler yerlestirmek istedigimizde kullanabiliriz
          IconButton(
            icon: const Icon(Icons.mark_email_unread_sharp),
            onPressed: () {},
          ),
          const Center(child: CircularProgressIndicator()),
        ],
        centerTitle: true, //! appbar title ini ortalamak icin true
        backgroundColor: Colors.transparent,
        elevation:
            0, //! golgelendirme gibi dusun sayfayi onde yapma imkani sunar
        systemOverlayStyle: SystemUiOverlayStyle
            .light, //! appbar widgetinin bu ozelligi sayesinde telefonundaki durum cubugunun rengini light mi dark mi olacagini ayarlayabiliyoruz
        actionsIconTheme: const IconThemeData(
          //! actions daki ikonlarin temalarini stil ozelliklerini buradan verebiliyoruz
          color: Colors.red,
          size: 30,
        ),
        //! ustu cizili seyler deprecated olmustur onun yerine farkli seyler kullanmamizi onerir gelistiriciler
        automaticallyImplyLeading:
            false, //! sayfada otomatik olarak back butonu gelmesin demek oluyor bu ilerde navigasyonlarda back butonunu flutter kendisi otomatik veriyor
      ),
      body: const Column(
        children: [],
      ),
    );
  }
}

flutterı öğrenirken biz bu tarz kodlamalar yapıyoruz ama yaptığımız şeylerin hepsi aslında proje geliştirirken bu şekilde direkt olarak
app barın özelliklerini misal veya herhangi bir stil özelliğini direkt olarak bu şekilde vermek aşırı yanlış ve insanlar yanlış ilerliyorlar
proje geliştirirken ondan sonra birçok sorun ortaya çıkıyor
profesyonel proje geliştirmek istiyorsan belli bir standarda sahip olmalısın ve bu standartlardan sapmamalısın. biz burada bir appbar widgetı yaptıysak
projede 6 tane appbar kullanılacaksa bu şekilde 6 kere yazmayız.

bu arada yukarıdaki kod kısmını incelerken theme dan nereden veriyoruz ya derseniz main.dart'ınıza gidin şu kısma bakın

Kod:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false, //debug bannerini kaldırdım
      theme: ThemeData.dark().copyWith(
        //! ThemeData.dark olsun ama () içerisine verdiklerim şeklinde olsun onlar da öyle ayarlansın copyWith buna yarıyor
        appBarTheme: const AppBarTheme(
          centerTitle: true,
          backgroundColor: Colors.transparent,
          elevation:
              0, //! misal şimdi böyle ayarladıktan sonra artık yeni bir sayfa oluşturup appbar kullandığımızda o appbara tekrar tekrar stil vermemize gerek kalmayacak olay bu aslında
        ),

burada zaten anlarsınız nereden geldiğini copyWith diyerek evet tema dark olsun ama şunları da şöyle ver diyebiliyoruz

bir sonraki konu için de button_learn.dart diye bir dosya açın butonlardan ve iconbutton lardan bahsedebiliriz bu konuda birçok kavramdan bahsettiğimi düşünüyorum

appbar, text widget, container, scaffold, sizedbox gibi birçok şeyden bahsettik seri devamında görüşmek üzere

<3 Gauloran​

Genişletmek için tıkla ...

Sheldon' Alıntı:

Bu seriyi çevirsek mi? Eline sağlık bu arada.

Genişletmek için tıkla ...

Sheldon' Alıntı:

Bu seriyi çevirsek mi? Eline sağlık bu arada.

Genişletmek için tıkla ...