Gerçekten Platformlar Arası Mobil Geliştirme İçin Google'ın Flutter'ını Kullanma

Yayınlanan: 2022-03-10
Hızlı özet ↬ Flutter, platformlar arası mobil uygulamalar oluşturmayı çok kolaylaştırır. Bu makale Flutter'ı tanıtıyor, diğer mobil geliştirme platformlarıyla karşılaştırıyor ve uygulama oluşturmaya başlamak için nasıl kullanılacağını gösteriyor.

Flutter, Google'dan açık kaynaklı, platformlar arası bir mobil geliştirme çerçevesidir. Tek bir kod tabanından iOS ve Android için yüksek performanslı, güzel uygulamaların oluşturulmasına olanak tanır. Aynı zamanda Google'ın yaklaşmakta olan Fuchsia işletim sistemi için geliştirme platformudur. Ek olarak, özel Flutter motor gömücüleri aracılığıyla diğer platformlara getirilebilecek şekilde tasarlanmıştır.

Flutter Neden Yaratıldı ve Neden Kullanmalısınız?

Platformlar arası araç takımları tarihsel olarak iki yaklaşımdan birini benimsemiştir:

  • Bir web görünümünü yerel bir uygulamaya sararlar ve uygulamayı bir web sitesiymiş gibi oluştururlar.
  • Yerel platform kontrollerini sararlar ve üzerlerinde bazı platformlar arası soyutlama sağlarlar.

Flutter, mobil geliştirmeyi daha iyi hale getirmek için farklı bir yaklaşım benimsiyor. Geliştiricilerin üzerinde çalıştığı bir çerçeve uygulama ve uygulamaları barındırmak için taşınabilir bir çalışma zamanına sahip bir motor sağlar. Çerçeve, yerel kontroller üzerinde yalnızca sarmalayıcı olmanın aksine, gerçekte oluşturulan widget'lar sağlayan Skia grafik kitaplığı üzerine kuruludur.

Bu yaklaşım, web sarmalayıcı seçeneğinin sağladığı gibi tamamen özel bir şekilde platformlar arası bir uygulama oluşturma esnekliği sağlar, ancak aynı zamanda sorunsuz performans sunar. Bu arada, Flutter ile birlikte gelen zengin widget kitaplığı ve çok sayıda açık kaynaklı widget, onu çalışmak için çok zengin özelliklere sahip bir platform haline getiriyor. Basitçe söylemek gerekirse, Flutter, mobil geliştiricilerin çok az veya hiç ödün vermeden platformlar arası geliştirme için sahip oldukları en yakın şeydir.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Dart oyunu

Flutter uygulamaları, orijinal olarak Google tarafından geliştirilen bir programlama dili olan Dart ile yazılmıştır. Dart, hem önceden hem de tam zamanında derlemeyi destekleyen, yerel uygulamalar oluşturmak için çok uygun hale getiren ve Flutter'ın sıcak yeniden yüklemesiyle verimli geliştirme iş akışı sağlayan nesne yönelimli bir dildir. Flutter kısa süre önce Dart 2.0 sürümüne de geçti.

Dart dili, çöp toplama, zaman uyumsuz bekleme, güçlü yazma, jenerikler ve zengin bir standart kitaplık dahil olmak üzere diğer dillerde görülen birçok özelliği sunar.

Dart, C#, JavaScript, F#, Swift ve Java gibi çeşitli dillerden gelen geliştiricilerin aşina olması gereken özelliklerin bir kesişimini sunar. Ek olarak, Dart Javascript'e derlenebilir. Flutter ile birlikte bu, kodun web ve mobil platformlar arasında paylaşılmasına olanak tanır.

Olayların Tarihsel Zaman Çizelgesi

  • Nisan 2015
    Dart Developer Summit'te gösterilen Flutter (başlangıçta kod adı Sky)
  • Kasım 2015
    Sky, Flutter olarak yeniden adlandırıldı
  • Şubat 2018
    Flutter beta 1, Mobile World Congress 2018'de duyuruldu
  • Nisan 2018
    Flutter beta 2 duyuruldu
  • Mayıs 2018
    Flutter beta 3, Google I/O'da duyuruldu. Google, Flutter'ın üretim uygulamaları için hazır olduğunu duyurdu

Diğer Geliştirme Platformlarıyla Karşılaştırma

Apple/Android Yerel

Yerel uygulamalar, yeni özelliklerin benimsenmesinde en az sürtüşmeyi sunar. Uygulamalar, platform satıcılarının (Apple veya Google) kendi kontrolleri kullanılarak oluşturulduğundan ve genellikle bu satıcılar tarafından belirlenen tasarım yönergelerine uyduğundan, verilen platformla daha uyumlu kullanıcı deneyimlerine sahip olma eğilimindedirler. Çoğu durumda, yerel uygulamalar, platformlar arası tekliflerle oluşturulanlardan daha iyi performans gösterir, ancak temeldeki çapraz platform teknolojisine bağlı olarak birçok durumda fark önemsiz olabilir.

Yerel uygulamaların sahip olduğu büyük bir avantaj, herhangi bir üçüncü taraf entegrasyonunu beklemek zorunda kalmadan, istenirse Apple ve Google'ın beta sürümünde oluşturduğu yepyeni teknolojileri hemen benimsemeleridir. Yerel uygulamalar oluşturmanın ana dezavantajı, platformlar arasında kodun yeniden kullanılmamasıdır; bu, iOS ve Android'i hedefliyorsa geliştirmeyi pahalı hale getirebilir.

Yerel Tepki Ver

React Native, yerel uygulamaların JavaScript kullanılarak oluşturulmasına izin verir. Uygulamanın kullandığı gerçek kontroller, yerel platform kontrolleridir, bu nedenle son kullanıcı yerel bir uygulama hissine sahip olur. React Native'in soyutlamasının sağladığının ötesinde özelleştirme gerektiren uygulamalar için yerel geliştirmeye hala ihtiyaç duyulabilir. Gerekli özelleştirme miktarının önemli olduğu durumlarda, React Native'in soyutlama katmanında çalışmanın faydası, bazı durumlarda uygulamayı yerel olarak geliştirmenin daha faydalı olacağı noktaya kadar azalır.

Xamarin

Xamarin'den bahsederken değerlendirilmesi gereken iki farklı yaklaşım vardır. En çapraz platform yaklaşımları için Xamarin.Forms vardır. Teknoloji React Native'den çok farklı olmasına rağmen, kavramsal olarak yerel kontrolleri soyutlaması bakımından benzer bir yaklaşım sunar. Aynı şekilde, kişiselleştirme açısından da benzer dezavantajları vardır.

İkincisi, birçok Xamarin-klasik terimi var. Bu yaklaşım, platforma özgü özellikler oluşturmak için Xamarin'in iOS ve Android ürünlerini bağımsız olarak kullanır; tıpkı doğrudan Apple/Android yerel kullanılırken olduğu gibi, Xamarin durumunda yalnızca C# veya F# kullanılır. Xamarin'in avantajı, platforma özel olmayan kodun, ağ oluşturma, veri erişimi, web hizmetleri vb. gibi şeylerin paylaşılabilmesidir.

Bu alternatiflerden farklı olarak Flutter, geliştiricilere kodun yeniden kullanımı, yüksek performanslı, akıcı kullanıcı arabirimleri ve mükemmel araçlarla daha eksiksiz bir çapraz platform çözümü sunmaya çalışır.

Flutter Uygulamasına Genel Bakış

Uygulama Oluşturma

Flutter'ı yükledikten sonra, Flutter ile bir uygulama oluşturmak, bir komut satırı açıp flutter create [app_name] girmek, VS Code'da "Flutter: New Project" komutunu seçmek veya Android'de "Start a Flutter Project"i seçmek kadar basittir. Studio veya IntelliJ.

Tercih ettiğiniz düzenleyiciyle birlikte bir IDE veya komut satırı kullanmayı seçseniz de, yeni Flutter uygulama şablonu size bir uygulama için iyi bir başlangıç ​​noktası sağlar.

Uygulama, başlık çubuğu, malzeme simgeleri ve tema gibi uygulama için bazı temel yapı iskeleleri sunmak için flutter / material.dart paketini getiriyor. Ayrıca, uygulama durumu değiştiğinde kullanıcı arabiriminin nasıl güncelleneceğini göstermek için durum bilgisi olan bir pencere öğesi kurar.

Yeni Flutter Uygulama Şablonu
iOS ve Android'de çalışan yeni Flutter uygulaması. (Büyük önizleme)

Takım Seçenekleri

Flutter, takımlama konusunda inanılmaz bir esneklik sunar. Uygulamalar, VS Code, Android Studio veya IntelliJ gibi desteklenen bir IDE'den olabileceği gibi, herhangi bir düzenleyiciyle birlikte komut satırından da kolayca geliştirilebilir. Alınacak yaklaşım büyük ölçüde geliştirici tercihine bağlıdır.

Android Studio, çalışan bir uygulamanın widget'larını analiz etmek ve uygulama performansını izlemek için Flutter Inspector gibi çoğu özelliği sunar. Ayrıca, bir widget hiyerarşisi geliştirirken kullanışlı olan birkaç yeniden düzenleme sunar.

VS Code, Android Studio/IntelliJ'den daha hızlı başlama eğiliminde olduğundan daha hafif bir geliştirme deneyimi sunar. Her IDE, kod tamamlama gibi yerleşik düzenleme yardımcıları sunar ve çeşitli API'lerin keşfedilmesine ve iyi hata ayıklama desteğine olanak tanır.

Komut satırı ayrıca, bir düzenleyicinin ötesinde herhangi bir araç bağımlılığı olmaksızın bir uygulama oluşturmayı, güncellemeyi ve başlatmayı kolaylaştıran flutter komutu aracılığıyla iyi bir şekilde desteklenir.

Çarpıntı Takımları
Flutter tooling, çeşitli ortamları destekler. (Büyük önizleme)

Sıcak Yeniden Yükleme

Takımdan bağımsız olarak Flutter, bir uygulamanın sıcak yeniden yüklenmesi için mükemmel desteği korur. Bu, çalışan bir uygulamanın birçok durumda değiştirilmesine ve uygulamayı durdurmaya, yeniden oluşturmaya ve yeniden dağıtmaya gerek kalmadan durumunu korumasını sağlar.

Sıcak yeniden yükleme, daha hızlı yinelemeye izin vererek geliştirme verimliliğini önemli ölçüde artırır. Platformu çalışmak gerçekten bir zevk haline getiriyor.

Test yapmak

Flutter, bir testten widget'larla etkileşim kurmak için bir WidgetTester yardımcı programı içerir. Yeni uygulama şablonu, aşağıda gösterildiği gibi, bir test yazarken nasıl kullanılacağını gösteren örnek bir test içerir:

 // Test included with the new Flutter application template import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:myapp/main.dart'; void main() { testWidgets('Counter increments smoke test', (WidgetTester tester) async { // Build our app and trigger a frame. await tester.pumpWidget(new MyApp()); // Verify that our counter starts at 0. expect(find.text('0'), findsOneWidget); expect(find.text('1'), findsNothing); // Tap the '+' icon and trigger a frame. await tester.tap(find.byIcon(Icons.add)); await tester.pump(); // Verify that our counter has incremented. expect(find.text('0'), findsNothing); expect(find.text('1'), findsOneWidget); }); }

Paketleri ve Eklentileri Kullanma

Flutter daha yeni başlıyor, ancak zaten zengin bir geliştirici ekosistemi var: Geliştiriciler için çok sayıda paket ve eklenti zaten mevcut.

Bir paket veya eklenti eklemek için, bağımlılığı uygulamanın kök dizinindeki pubspec.yaml dosyasına eklemeniz yeterlidir. Ardından, flutter packages get komut satırından veya IDE aracılığıyla çalıştırın ve Flutter'ın araçları gerekli tüm bağımlılıkları getirecektir.

Örneğin, Flutter için popüler resim seçici eklentisini kullanmak için, pubspec.yaml'nin onu aşağıdaki gibi bir bağımlılık olarak listelemesi yeterlidir:

 dependencies: image_picker: "^0.4.1"

Ardından flutter packages get çalıştırmak, kullanmak için ihtiyacınız olan her şeyi getirir, ardından Dart'ta içe aktarılabilir ve kullanılabilir:

 import 'package:image_picker/image_picker.dart';

Widget'lar

Flutter'daki her şey bir widget'tır. Bu, ListView , TextBox ve Image gibi kullanıcı arabirimi öğelerinin yanı sıra düzen, animasyon, hareket tanıma ve temalar da dahil olmak üzere çerçevenin diğer bölümlerini içerir.

Her şeyin bir pencere öğesi olmasıyla, tesadüfen bir pencere öğesi de olan tüm uygulama, pencere öğesi hiyerarşisi içinde temsil edilebilir. Her şeyin bir pencere öğesi olduğu bir mimariye sahip olmak, bir uygulamanın bir bölümüne uygulanan belirli niteliklerin ve davranışların nereden geldiğini açıkça ortaya koyar. Bu, özellikleri ve davranışı tutarsız bir şekilde ilişkilendiren, bazen bunları bir hiyerarşideki diğer bileşenlerden ve bazen de kontrolün kendisine bağlayan diğer birçok uygulama çerçevesinden farklıdır.

Basit UI Widget Örneği

Flutter uygulamasına giriş noktası ana fonksiyondur. Ekrana bir kullanıcı arabirimi öğesi için bir pencere öğesi yerleştirmek için main() içinde runApp() çağırın ve ona pencere öğesi hiyerarşisinin kökü olarak hizmet edecek pencere öğesini iletin.

 import 'package:flutter/material.dart'; void main() { runApp( Container(color: Colors.lightBlue) ); }

Bu, ekranı dolduran açık mavi bir Container widget'ı ile sonuçlanır:

Minimum Çarpıntı Uygulaması
Tek bir kapsayıcı ile Minimal Flutter uygulaması (Geniş önizleme)

Vatansız ve Durum Bilgili Widget'lar

Widget'lar iki şekilde gelir: durum bilgisi olmayan ve durum bilgisi olan. Durum bilgisi olmayan pencere öğeleri, oluşturulduktan ve başlatıldıktan sonra içeriklerini değiştirmezler, oysa durum bilgili pencere öğeleri, uygulama çalıştırılırken, örneğin kullanıcı etkileşimine yanıt olarak değişebilen bazı durumları korur.

Bu örnekte, ekrana bir FlatButton parçacığı ve Text parçacığı çizilmiştir. Text pencere aracı, durumu için bazı varsayılan String başlar. Düğmeye basılması, Text pencere aracının güncellenmesine ve yeni bir String görüntülenmesine neden olacak bir durum değişikliğiyle sonuçlanır.

Bir pencere öğesini kapsüllemek için StatelessWidget veya StatefulWidget türetilen bir sınıf oluşturun. Örneğin, açık mavi Container aşağıdaki gibi yazılabilir:

 class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container(color: Colors.lightBlue); } }

Flutter, widget ağacına eklendiğinde, UI'nin bu kısmı oluşturulabilmesi için widget'ın oluşturma yöntemini çağırır.

Durum bilgisi olan bir pencere öğesi için StatefulWidget türet:

 class MyStatefulWidget extends StatefulWidget { MyStatefulWidget(); @override State createState() { return MyWidgetState(); } } class MyStatefulWidget extends StatefulWidget { MyStatefulWidget(); @override State createState() { return MyWidgetState(); } }

Durum bilgisi olan pencere öğeleri, belirli bir durum için pencere öğesi ağacını oluşturmaktan sorumlu olan bir State sınıfını döndürür. Durum değiştiğinde, pencere öğesi ağacının ilişkili kısmı yeniden oluşturulur.

Aşağıdaki kodda, State sınıfı, bir düğme tıklandığında bir String günceller:

 class MyWidgetState extends State { String text = "some text"; @override Widget build(BuildContext context) { return Container( color: Colors.lightBlue, child: Padding( padding: const EdgeInsets.all(50.0), child: Directionality( textDirection: TextDirection.ltr, child: Column( children: [ FlatButton( child: Text('Set State'), onPressed: () { setState(() { text = "some new text"; }); }, ), Text( text, style: TextStyle(fontSize: 20.0)), ], ) ) ) ); } } class MyWidgetState extends State { String text = "some text"; @override Widget build(BuildContext context) { return Container( color: Colors.lightBlue, child: Padding( padding: const EdgeInsets.all(50.0), child: Directionality( textDirection: TextDirection.ltr, child: Column( children: [ FlatButton( child: Text('Set State'), onPressed: () { setState(() { text = "some new text"; }); }, ), Text( text, style: TextStyle(fontSize: 20.0)), ], ) ) ) ); } }

Durum, setState() iletilen bir işlevde güncellenir. setState() çağrıldığında, bu işlev, bu örnekteki dize gibi herhangi bir dahili durumu ayarlayabilir. Ardından, durum bilgisi olan pencere öğesinin ağacını güncelleyerek build yöntemi çağrılır.

Durum Değişikliği
Kullanıcı etkileşiminden kaynaklanan bir durum değişikliğini işleme (Büyük önizleme)

Ayrıca, Text pencere araçları gibi alt ağacında bunu gerektiren herhangi bir pencere aracının metin Directionality ayarlamak için Yönlülük pencere aracının kullanımına da dikkat edin. Buradaki örnekler sıfırdan kod oluşturmaktır, bu nedenle widget hiyerarşisinde bir yerde Directionality gereklidir. Ancak, varsayılan uygulama şablonu gibi MaterialApp pencere aracını kullanmak, metin yönünü örtük olarak ayarlar.

Düzen

runApp işlevi, pencere öğesini varsayılan olarak ekranı dolduracak şekilde şişirir. Widget düzenini kontrol etmek için Flutter, çeşitli düzen widget'ları sunar. Alt widget'ları dikey veya yatay olarak hizalayan, widget'ları belirli bir alanı dolduracak şekilde genişleten, widget'ları belirli bir alanla sınırlayan, ekranda ortalayan ve widget'ların birbiriyle örtüşmesine izin veren düzenleri gerçekleştirmek için widget'lar vardır.

Yaygın olarak kullanılan iki widget, Row ve Column . Bu widget'lar, alt widget'larını yatay (Satır) veya dikey (Sütun) olarak görüntülemek için düzenler gerçekleştirir.

Bu düzen widget'larını kullanmak, onları bir alt widget listesi etrafına sarmayı içerir. mainAxisAlignment , pencere öğelerinin yerleşim ekseni boyunca ortalanmış, başlangıçta, bitişte veya çeşitli boşluk seçenekleriyle nasıl konumlandırılacağını kontrol eder.

Aşağıdaki kod, bir Row veya Column birkaç alt pencere öğesinin nasıl hizalanacağını gösterir:

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Row( //change to Column for vertical layout mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.android, size: 30.0), Icon(Icons.pets, size: 10.0), Icon(Icons.stars, size: 75.0), Icon(Icons.rowing, size: 25.0), ], ); } } 
Satır Widget'ı
Yatay düzeni gösteren satır widget'ı (Büyük önizleme)

Dokunmaya Cevap Vermek

Dokunma etkileşimi, GestureDetector sınıfında kapsüllenen hareketlerle gerçekleştirilir. Aynı zamanda bir pencere öğesi olduğundan, hareket tanıma eklemek, alt pencere öğelerini bir GestureDetector içine sarmak kadar kolaydır.

Örneğin, bir Simgeye dokunma işlemi eklemek için, onu bir Icon alt GestureDetector yapın ve algılayıcının işleyicilerini istenen hareketlerin yakalanması için ayarlayın.

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: () => print('you tapped the star'), onDoubleTap: () => print('you double tapped the star'), onLongPress: () => print('you long pressed the star'), child: Icon(Icons.stars, size: 200.0), ); } }

Bu durumda, simgeye dokunma, çift dokunma veya uzun basma işlemi gerçekleştirildiğinde, ilgili metin yazdırılır:

 To hot reload your app on the fly, press "r". To restart the app entirely, press "R". An Observatory debugger and profiler on iPhone X is available at: https://127.0.0.1:8100/ For a more detailed help message, press "h". To quit, press "q". flutter: you tapped the star flutter: you double tapped the star flutter: you long pressed the star

Basit dokunma hareketlerine ek olarak, kaydırma ve ölçeklemeden sürüklemeye kadar her şey için çok sayıda tanıyıcı vardır. Bunlar, etkileşimli uygulamalar oluşturmayı çok kolaylaştırır.

Tablo

Flutter ayrıca, opaklığı değiştiren, kırpma yollarını belirleyen ve dekorasyon uygulayanlar da dahil olmak üzere boyamak için çeşitli araçlar sunar. Hatta CustomPaint widget'ı ve ilişkili CustomPainter ve Canvas sınıfları aracılığıyla özel boyamayı destekler.

Bir boyama widget'ına bir örnek, ekrana bir BoxDecoration boyayabilen DecoratedBox . Aşağıdaki örnek, ekranı bir degrade dolguyla doldurmak için bunun nasıl kullanılacağını gösterir:

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new DecoratedBox( child: Icon(Icons.stars, size: 200.0), decoration: new BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } } 
Degrade Arka Plan
Degrade arka plan boyama (Büyük önizleme)

Animasyon

Flutter, bir animasyonu başlatma ve durdurmanın yanı sıra değerleri bir animasyona göre değiştirmek de dahil olmak üzere, zaman içinde animasyon oynatmayı kontrol eden bir AnimationController sınıfını içerir. Ek olarak, bir AnimationController ile bağlantılı olarak bir animasyon oluşturmaya izin veren bir AnimatedBuilder pencere aracı vardır.

Daha önce gösterilen dekore edilmiş yıldız gibi herhangi bir widget, özelliklerini canlandırabilir. Örneğin, animasyon bir durum değişikliği olduğundan, kodu StatefulWidget olarak yeniden düzenlemek ve bir AnimationController State sınıfına geçirmek, widget oluşturulurken animasyonlu değerin kullanılmasına izin verir.

 class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } } class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } } class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } }

Bu durumda, değer, parçacığın boyutunu değiştirmek için kullanılır. builder işlevi, animasyonlu değer değiştiğinde çağrılır, bu da yıldızın boyutunun 750 ms'den fazla değişmesine neden olur ve bir ölçek oluşturur:

Animasyon
Simge Boyutu Animasyonu

Yerel Özellikleri Kullanma

Platform Kanalları

Android ve iOS'ta yerel platform API'lerine erişim sağlamak için bir Flutter uygulaması platform kanallarını kullanabilir. Bunlar, Flutter Dart kodunun barındırma iOS veya Android uygulamasına mesaj göndermesine izin verir. Mevcut açık kaynaklı eklentilerin çoğu, platform kanalları üzerinden mesajlaşma kullanılarak oluşturulmuştur. Platform kanallarıyla nasıl çalışılacağını öğrenmek için Flutter belgeleri, yerel pil API'lerine erişimi gösteren iyi bir belge içerir.

Çözüm

Beta sürümünde bile Flutter, platformlar arası uygulamalar oluşturmak için harika bir çözüm sunar. Mükemmel kalıplama ve sıcak yeniden yükleme ile çok hoş bir geliştirme deneyimi getiriyor. Açık kaynak paketlerinin zenginliği ve mükemmel belgeler, başlamayı kolaylaştırır. İleriye dönük olarak, Flutter geliştiricileri iOS ve Android'e ek olarak Fuşya'yı hedefleyebilecekler. Motor mimarisinin genişletilebilirliği göz önüne alındığında, Flutter'ın çeşitli başka platformlarda da yer aldığını görmek beni şaşırtmaz. Büyüyen bir toplulukla, atlamak için harika bir zaman.

Sonraki adımlar

  • Flutter'ı yükleyin
  • Dart Dil Turu
  • Flutter Codelab'leri
  • Flutter Udacity Kursu
  • Makale Kaynak Kodu