Önce yeni bir proje oluşturalım. app kısmına oluşturmak istediğiniz projenin oluşturulacağı dizinin adını yazın.
flutter create appŞimdi cd app diyerek proje dizine girelim.
cd appProje dizininde bulunan pubspec.yaml dosyası içerisinde dart paketlerini ve uygulama içerisinde kullanılacak olan assets leri flutter ayarları altında görebilirsiniz. yaml tıpkı json gibi yaygın olarak konfigürasyon dosyalarında kullanılan bir format.
Dosyanın adı dart paket yöneticisi pub dan geliyor.
https://pub.dartlang.org/pub tıpkı node.js paket yöneticisi npm gibi dart projelelerine paket çekmenizi, paketinizi yayınlamanızı ve projenizi build almanız gibi şeyleri sağlayan bir araç.
Proje dizini içerisinde lib klasörünü ve bu klasörün içerisinde oluşan main.dart dosyasını görebilirsiniz. Uygulamamızın çekirdek dosyası adından anlaşıldığı üzere bu.
Dosyanın en tepesinde bulunan import parametresi ve sonrasında yazan package:flutter/material.dart ile paketi main.dart dosyasına dahil ederek kullanılabilir kılıyoruz.
import 'package:flutter/material.dart';
Projeye paket eklemek
Uygulama geliştirirken ihtiyacınız olabilecek paketleri yukarıda linkini verdiğim pub.dartlang.org adresinden arayabilirsiniz.Örneğin url_launcher paketinin hemen altında projenize nasıl dahil edeceğinizi, nasıl indireceğinizi ve nasıl kullanacağınızı sırasıyla görebilirsiniz.
https://pub.dartlang.org/packages/url_launcher#-installing-tab-
İlk olarak pubspec.yaml dosyasında dependencies parametresi altına paketin adını ve indirmek istediğimiz versiyonunu yazıyoruz.
dependencies:Sonrasında paketi çekecek olan komutu çalıştıralım. Bu komut ile pubspec.yaml dosyasında eklediğiniz ve indirilmeyen paketler projeye dahil edilir.
url_launcher: ^4.0.2
flutter packages getVe son olarak paketimizi dosyamıza import edelim.
import 'package:url_launcher/url_launcher.dart';
Projeyi çalıştırmak
Projeyi bir cihazda çalıştırmak için aşağıdaki komutu proje dizininde çalıştırıyoruz.
flutter runAçık bir simülatör ya da bilgisayarınıza bağlı bir cihaz yoksa
No connected devices.mesajını göreceksiniz.
Android SDK ve gerekli kurulumları bilgisayarınızda hali hazırda varsa android telefonunuzu geliştirici modu açık olacak şekilde usb üzerinden bağlarsanız ya da bir android simülatörü çalıştırırsanız uygulamanın çok kısa sürede development ortamında çalıştırıldığını göreceksiniz.
Artı ikonuda tıklarsanız her tıklamanızda ortada 0 yazan alanın bir arttığını görebilirsiniz.
Widget nedir?
Aşağıda gördüğünüz Center ve Text alanları flutter/material.dart paketi ile projeye dahil edilen widget alanlarıdır. Bir widget uygulama sayfasında bulunan bir input, görsel, ikon ya da bunların hepsini içerisinde bulunduran bir kapsayıcı olabilir.
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}StatelessWidget nedir?
Stateless widget içerisinde bir state yönetimi yapmaya gerek duymayan yani içerisinde bulunan değişkenlerin sabit olduğu alanlar için kullanılabilir. Bu şekilde oluşturulan bir widget başka bir widget içerisinde çağırılabilir ve içerisine data aktarımı yapılabilir.Flutter resmi sitesinde verilen örneği inceleyelim. MyAppBar isminde bir class oluşturulmuş ve StatelessWidget class ı extends ile dahil edilmiş.
Sonraki satırda MyAppBar({this.title}) kısmında başka bir widget içerisinde çağırıldığı zaman title adıyla bir data aktarımı yapılması gerektiği tanımlanmış.
Ve hemen sonraki satırda title değerinin Widget tipinde olması gerektiği belirtilmiş.
Hemen aşağıda MyScaffold class ına gidecek olursak içerisinde MyAppBar widget kullanımına dikkat edelim. Bir fonksiyon şeklinde çağırılmış ve title parametresi içerisinde Text tipinde bir widget aktarımı yapılmış.
MyAppBar(
title: Text(
'Example title',
style: Theme.of(context).primaryTextTheme.title,
),
)import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
MyAppBar({this.title});
// Fields in a Widget subclass are always marked "final".
final Widget title;
@override
Widget build(BuildContext context) {
return Container(
height: 56.0, // in logical pixels
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(color: Colors.blue[500]),
// Row is a horizontal, linear layout.
child: Row(
// <Widget> is the type of items in the list.
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null disables the button
),
// Expanded expands its child to fill the available space.
Expanded(
child: title,
),
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
);
}
}
class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Material is a conceptual piece of paper on which the UI appears.
return Material(
// Column is a vertical, linear layout.
child: Column(
children: <Widget>[
MyAppBar(
title: Text(
'Example title',
style: Theme.of(context).primaryTextTheme.title,
),
),
Expanded(
child: Center(
child: Text('Hello, world!'),
),
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
title: 'My app', // used by the OS task switcher
home: MyScaffold(),
));
}StatefulWidget Nedir?
Stateful Widget içerisinde state yönetimi yapmaya ihtiyaç duyan widgetlar için kullanılır. Örneğin formlar ve listeleme sayfaları gibi sayfalarda state kullanımına ihtiyaç olduğundan bu sayfalarda Stateful Widget kullanılır.
Şimdi aşağıdaki örnekle StatefulWidget kullanıma göz atalım.
İlk olarak Counter adında bir class oluşturup StatefulWidget classını extends ile dahil ediyoruz.
Sonrasında aşağıdaki satırla createState fonksiyonu ile aşağıda oluşturulan _CounterState classınızı dönüyoruz. Fonksiyonunun başında kullanılan _CounterState bu fonksiyonun _CounterState tipinde bir class döneceğini belirtiyor.
Hemen altında _increment fonksiyonunu oluşturduk bu fonksiyonda geri bir değer dönmediğimiz için void tipinde olduğunu belirttik.
Ve aşağıdaki şekilde RasiedButton widget kullanarak tıklanabilir bir buton ekledik. onPressed buton her tıklandığında tetiklenecek olan fonksiyonun adı ve child değeri ise butonun içerisinde görünecek olan bir değer. Text widget kullanarak içerisine Increment yazısını yazdık. Ve hemen RaisedButton altında Text içerisinde kullanılan $_counter değerine dikkat edin. Dart içerisinde bir değeri string içerisinde yazarken önüne $ işareti getirmemiz yeterli. Ayrıca bazı widgetların children ve bazılarının child ile parametre aldığına dikkat edin. children ile değer alanlar adından anlayacağınız üzere birden fazla yani array şeklinde değer alabiliyorlar. Row, Column, Container, Stack bunlara örnek olarak verilebilir. RaisedButton ve Text gibi widget türlerine ise sadece child parametresi ile tek bir widget aktarımı yapılabilir.
Şimdi aşağıdaki örnekle StatefulWidget kullanıma göz atalım.
İlk olarak Counter adında bir class oluşturup StatefulWidget classını extends ile dahil ediyoruz.
Sonrasında aşağıdaki satırla createState fonksiyonu ile aşağıda oluşturulan _CounterState classınızı dönüyoruz. Fonksiyonunun başında kullanılan _CounterState bu fonksiyonun _CounterState tipinde bir class döneceğini belirtiyor.
_CounterState createState() => _CounterState();class _CounterState extends State<Counter> { int _counter = 0;Hemen altında _increment fonksiyonunu oluşturduk bu fonksiyonda geri bir değer dönmediğimiz için void tipinde olduğunu belirttik.
Ve aşağıdaki şekilde RasiedButton widget kullanarak tıklanabilir bir buton ekledik. onPressed buton her tıklandığında tetiklenecek olan fonksiyonun adı ve child değeri ise butonun içerisinde görünecek olan bir değer. Text widget kullanarak içerisine Increment yazısını yazdık. Ve hemen RaisedButton altında Text içerisinde kullanılan $_counter değerine dikkat edin. Dart içerisinde bir değeri string içerisinde yazarken önüne $ işareti getirmemiz yeterli. Ayrıca bazı widgetların children ve bazılarının child ile parametre aldığına dikkat edin. children ile değer alanlar adından anlayacağınız üzere birden fazla yani array şeklinde değer alabiliyorlar. Row, Column, Container, Stack bunlara örnek olarak verilebilir. RaisedButton ve Text gibi widget türlerine ise sadece child parametresi ile tek bir widget aktarımı yapılabilir.
return Row(
children: <Widget>[
RaisedButton(
onPressed: _increment,
child: Text('Increment'),
),
Text('Count: $_counter'),
],
)setState(() {
// This call to setState tells the Flutter framework that
// something has changed in this State, which causes it to rerun
// the build method below so that the display can reflect the
// updated values. If we changed _counter without calling
// setState(), then the build method would not be called again,
// and so nothing would appear to happen.
_counter++;
});class Counter extends StatefulWidget {
// This class is the configuration for the state. It holds the
// values (in this case nothing) provided by the parent and used by the build
// method of the State. Fields in a Widget subclass are always marked "final".
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _increment() {
setState(() {
// This call to setState tells the Flutter framework that
// something has changed in this State, which causes it to rerun
// the build method below so that the display can reflect the
// updated values. If we changed _counter without calling
// setState(), then the build method would not be called again,
// and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance
// as done by the _increment method above.
// The Flutter framework has been optimized to make rerunning
// build methods fast, so that you can just rebuild anything that
// needs updating rather than having to individually change
// instances of widgets.
return Row(
children: <Widget>[
RaisedButton(
onPressed: _increment,
child: Text('Increment'),
),
Text('Count: $_counter'),
],
);
}
}Kaynaklar
Bu yazı okuyucunun dart dili üzerinde bilgi sahibi olduğunu varsayarak yazılmıştır. Dart ile ilgili kendinizi geliştirmek istiyorsanız aşağıdaki ders videolarını tavsiye ederim.
Yorum yapıp paylaşabilirsiniz memnun olurum. Teşekkürler.
Hiç yorum yok:
Yorum Gönder