Flutter 1.9 ile Gelen Yenilikler

Herkese merhabalar.

Flutter’ın yeni kararlı sürümü Flutter 1.9 kullanıma sunuldu. Ayrıca Flutter için gerekli olan Dart dilinin de 2.5 sürümü yayınlandı.

3 tane yeni widget duyuruldu ve bir çok hata düzeltmesi yapıldı. Bu makalede yeni kullanıma sunulan widgetların ve eklenilen bir kaç özelliğin kullanımına değineceğiz.

Yeni sürüme geçmek için flutter upgrade komutunu çalıştırmanız yeterli olacaktır.

Flutter 1.9'da gerçekleşen tüm değişiklik ve yenilikleri görmek için (Flutter 1.9 Release Notes) sayfasını inceleyebilirsiniz.

Normalde kullandığımız yazılım geliştirme ortamlarında kodlarımız tamamlanırken alfabetik olarak alt alta bize öneri olarak karşımıza çıkar fakat Dart 2.5 ile Machine Learning kullanılarak akıllı kod tamamlama özelliği getirildi. Aşağıdaki resimden bunun örneğini görebilirsiniz.

Ayrıca github reposu: https://github.com/dart-lang/tflite_native

Makine Öğrenmesi ile Kod Tamamlama(Dart 2.5)

Flutter 1.9'da gelen yeni 3 widget

• ToggleButtons
• SelectableText
• ColorFiltered

1- ToggleButtons

Github: https://github.com/csells/flutter_toggle_buttons

Resimden de görüldüğü gibi yan yana dizilmiş buton kümelerinden oluşan bu widget çoklu seçilerek de kullanılabilir ya da sadece bir buton seçilerek tab mantığına benzer bir şekilde kullanılabilir. Kullanımı şu şekilde:

Önce StateFull widget içerisindeki State sınıfının içine hangi butonun seçilip seçilmediğini anlamak için bool listesi oluşturuyoruz ve initState içerisinde başlangıç değerlerimizi atıyoruz.

List<bool> isSelectedButton;

  @override
  void initState() {
    super.initState();
    isSelectedButton = [
      true,
      false,
      false,
    ];
  }

ToggleButtons(
                children: <Widget>[
                  Icon(Icons.ac_unit),
                  Icon(Icons.call),
                  Icon(Icons.cake),
                ],
                isSelected: isSelectedButton,
                onPressed: (index) {
                  setState(() {
                   isSelectedButton[index]=!isSelectedButton[index];
                  });
                },
              ),

Eğer çoklu seçim olarak kullanmak istiyorsanız yukarıdaki gibi kullanabilirsiniz.

Tekli olarak tab mantığı gibi çalışan istiyorsanız setState’in içine aşağıdaki kodu alabilirsiniz.

for (var i = 0; i < isSelectedButton.length; i++) {
                      if (i == index) {
                        isSelectedButton[i] = true;
                      } else {
                        isSelectedButton[i] = false;
                      }
                    }
                  });

2- SelectableText

Flutter SelectableText

SelectableText class: https://api.flutter.dev/flutter/material/SelectableText-class.html

Bu widget yazıların üstüne uzun basıldığında seçilebilmesi sağlar. Kullanımı şu şekilde.

SelectableText("Bu yazı SelectableText ile oluşturulmuştur.")

3- ColorFiltered

Bu widget oluşturduğunuz widgetları ve onların altındaki widgetları renklendirmenizi sağlar. Kullanımı şu şekilde:

Github: https://github.com/csells/flutter_color_filter

ColorFiltered(
          colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcOut),
          child: YourWidget()
      ),

Flutter Web ve Mobil kısmı tek çatı altında birleştirildi.

Yeni gelen bu güncellemeden faydalanmak için aşağıdaki komutları sırayla çalıştırmamız gerekmektedir.

$ flutter channel master
$ flutter upgrade
$ flutter config --enable-web

flutter channel master

flutter upgrade

flutter config --enable-web

Gerekli işlemleri yaptıktan sonra flutter create webproje komutunu çalıştırarak webproje adında bir adet proje oluşturalım.

Yenilik olarak oluşturduğumuz projede daha önceki sürümlerde olmayan web klasörü projemize geldi.

Main.dart dosyasına baktığımızda Flutter web projelerinde daha önceden bulunan import ‘package:flutter_web_ui/ui.dart’ importu yerine mobilde kullandığımız import ‘package:flutter/material.dart’; importu altında web ve mobil kısmı birleştirilmiş. Şimdi chrome tarayıcısında projemizi çalıştıralım.

flutter run -d chrome

komutu ile projemizi çalıştırdık ve sonuç:

Diğer yenilikler;

• MacOS Catalina ve iOS 13 desteği
• 24 dile daha destek getirildi.

• Hata mesajlarının daha okunaklı ve kullanışlı olması güncelleme getirildi.

Kaynaklar:

Flutter news from GDD China: uniting Flutter on web and mobile, and introducing Flutter 1.9

flutter/flutter

What’s New in Flutter 1.9