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

Gauloran

Kıdemli Moderatör
7 Tem 2013
8,096
585
local
selam, serinin 10.konusundayız 9 konu boyunca hatta arada birkaç ufak konu da var tabi onların linklerini de seriyi sıradan takip ederken linkleri bir yerlerde bulursunuz konu içinde bırakmışımdır, birkaç ufak konuyla da birlikte 10 konudan fazla oldu aslında ve hep darttan bahsettim. şimdi artık vscode'un, android studio'yu bilgisayarınıza yüklemiş olmanız gerekiyor aslında seriye başlarken de bunları söylemişimdir zaten ama diyelim ki sadece tarayıcıdan şu ana kadar geldiniz o kodu sanaldan çalıştır bunu buradan çalıştır diye diye geldiyseniz artık o yöntem biraz sökmeyebilir gerçi hala sökedebilir çünkü flutter projesi yazabileceğiniz ortam mevcut FlutLab.io - Flutter IDE online

neden vscode?
vscode hızlı sade basit çok fazla kişi kullanıyor eklentileri güçlü daha az kasar

neden android studio yüklüyoruz ki?
android studio'nun emulatorunu kullanıyorum ben vscode eklentisi ile birlikte temel sebep bu değil tabi ki lazım

Flutter projesi klasör yapısı:

Sjol5j.png


%99 web windows android gibi klasörlere girip key mevzuları dışında kod yazmıyoruz o klasörlere girip
bazen flutter projelerinde native kodlar geliştirilebiliyor tabi.

pubspec.yaml dosyası bizim için önemli
paketleri kullandığımız için bu paketleri eklediğimiz dosya burası. pubspec.yaml dan yönetiliyor aynı şekilde assetlerde buradan yönetilir
klasör yapısı bu kadar. bu paket olayı flutter projesine başladığımızda pub.dev'i bilmemiz gerekiyor dart ve flutter paketlerinin toplandığı bir
web sitesi.

shimmer vb. çok fazla paket var özel tabbarlar mı dersin ui lar mı dersin pub.dev içerisinde mevcut insanlar paylaşımlar yapıp flutter
kendi resmi kanalı üzerinden de paylaşımlar yapmakta buraya. imagepicker mesela, animation misal uygulama içerisinde animasyonu beğendik örneğin
oradan paketi yükleyebiliyoruz projemize pubspec.yaml dan kontrol ediyoruz bunları oraya ekliyoruz çok çok fazla paket var.


flutter dev ekibinin de geliştirdiği çok fazla var. direkt olarak bunları default olarak eklememişler boyut büyüsün diye dileyen kullansın demişler.
url_launcher mesela flutter dev in hazırladığı kendi official paketi.

fluttercommunity.dev sektörde çok kullanılan paketleri toplamışlar ve çok fazla
insan tarafından onaylandığından dolayı aşırı faydalı oluyor. google ın kendi fontlarını projelerinizde kullanabileceğiniz google fonts diye bir paket var misal
bunlar projeden projeye değişiyor neyi kullanacağımıza neye ihtiyacımız olduğunu belirleyip karar vermek gerek.


bir paketi ekledikten sonra pubspec.yaml a flutter pub get terminale yazarsak pubspec.yaml daki paketi indir ve projeme ekle demiş oluruz
flutter_lints bize kod analizi yapmamızı sağlıyor pubspec.yaml içerisinde görebiliyoruz onu da
özel bir font olduğu zaman görseller vs. projemizin dışarıdan alacak bütün her şeyi pubspec.yaml üzerinden kontrol ediyoruz oradan ekliyoruz.

android studio kurulumu ve visual studio code kurulumu çok basit bunları direkt yazarak da bulabilirsiniz ki serinin ilk kısmında zaten link bırakmışımdır bunlarla ilgili

yine de yüklemekle ilgili sıkıntı çekenler için buraya yazayım örneğin windows kurulumu için:

1- https://storage.googleapis.com/flut...ble/windows/flutter_windows_3.10.2-stable.zip
2- flutter sdk path windows diye aratın youtube üzerinden ilk çıkan videoya bakın path ekleme olayını öğreneceksiniz
3- terminali açın cmd yani flutter doctor yazın bu size gerekli olan bileşenlerden hangilerinin yüklü olup olmadığını verir
4- android studio'yu yükleyin Download Android Studio & App Tools - Android Developers
5- ANDROID_SDK_ROOT araştırın bunda da path ekleme mevzusu vardı
6- flutter doctor --android-licenses yazıp kabul edin bunların hepsini y yazıp enterlayacaksınız öyle hatırlıyorum
7- flutter doctor yazın tekrar

bu kadar aslında. muhtemelen bu kısma gelene kadar sorun yaşayacaksınız ama ufak tefek şeyler oluyor ve çözülüyor büyük sıkıntı değil. bu tür yükleme hataları sizin canınızı sıkabilir ve motivasyonunuzu sıfıra çekebilir haberiniz olsun. ama devam ediyoruz

ve yine bu kısma gelince emulator yok diyecek android studio install emulator falan yazarak android studio içerisinde bir emulator yüklemeyi öğreneceksiniz ve bu emulatorü visual studio code yüklyip açtıktan sonra vscode içinde extensions kısmında dart dilini yükledikten sonra eklentilerden android studio emulator yazarak şu eklentiyi yükleyip eklenti ayarlarına gidip android studio içinde kurduğunuz emulator ın kurulu olduğu yerin pathini eklenti içerisinde belirttikten sonra hazırız

Sjo3Pn.png


Sjo8Dy.png


konuya eklediğim resimler umarım patlamaz ama emulatorun ve ilgili eklentinin hangisi olduğunu göstermiştim çok da önemli değil yazarak da bulabilirsiniz bakmanıza gerek yok.

main.dart a geçelim artık

SjoBeD.png


default bir flutter projesinin main.dart ını görüyoruz yorum satırlarını silmek için ctrl + f //.** yaparsanız bütün // ile başlayan ve sonrasında satırda devam eden yorumları seçip silebilirsiniz.

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

void main() {
  runApp(const MyApp());
  /*
  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
   */
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData( //tema ile ilgili ayarları yapabiliyoruz
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'), //MyHomePage diye bir ana sayfamız varmış böyle düşünebiliriz bir title istiyormuş bizden
    );
  }
}

class MyHomePage extends StatefulWidget { //MyHomePage burada
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

ilk başta çok karışık ama dart diliyle ilgili 9 dan fazla konuyu boşuna yapmadığımız için buralara basitçe açıklamalar getirip anlamlandırabiliyoruz. fark ettiyseniz sayfa yapısını sınıf gibi düşünün yani ne olmuş işte MyHomePage diye bir sayfa varmış ana sayfa olarak belirlenmiş MyHomePage de stful veya stless den mi türetilmiş peki stful stless neymiş falan gibi araştırmalara kendiniz de girerseniz zaten ortaya çıkıyor. Flutter'da her şey widgettır. Yani o ünlü söz

Everything is a Widget, but don’t put everything in one Widget!​


Yani mesela en altta yer alan arttır manasındaki buton widgetı FloatingActionButton widgetı bu widgeta bir child verilmiş yani çocuk verilmiş oraya da bir Icon verilmiş + şekline sahip oradaki Icon(Icons.add), kısmını silip yerine bir Text widgetı koysaydık orada bir yazı göstermiş olacaktık yok eğer birden fazla şey koymak istiyorsak ve bunları yan yana yapmak istiyorsak Row diye bir widget var onu kullanıp Row widgetının içerisine birden fazla çocuk vererek ki bu da children diyerek oluyor sonra [] açıp içerisine yazıyoruz, yok eğer alt alta olmasını istiyorsak Column widgetını kullanıyoruz böyle bir sarmal yapıda mantığı var bunlar çok açıklayıcı gelmemiş olabilir ancak ilerledikçe zaten anlaşılır

bu konunun ardından okumanızı en azından göz gezdirmenizi istediğim yazılar veya sayfalar:

bir sonraki konu ile devam edelim, beğenmeyi yorum yapmayı unutmayalım
görüşmek üzere

<3 Gauloran​
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.