Flutter’da kütüphanelere ”  https://pub.dev/ ” adresinden ulaşabilirsiniz. Örnek xml okuyan ” https://pub.dev/packages/xml ” bu kütüphaneyi yüklemek için aşağıdaki adımları yapıyoruz.

Adım 1

pubspec.yaml dosyasını açın ve ” dependencies: ” adı altına kütüphane adını yapıştırın

Örnek :

Adım 2

Main.dart dosyasını açın ve kütüphaneyi import edin  ”  import ‘package:xml/xml.dart’; ” hepsi bu kadar

Flutter uygulamanıza resim eklemek için Image.network kullanabilirsiniz.

Kullanımı;

Image.network("https://www.sanaldata.com/wp-content/themes/SanalData/images/logo.png",  width: 300,height: 150),

Çıktısı

Futter uygulamanızda namı diyar messagebox kullanmak isterseniz aşağıdaki kod herhangi bir event’a yazmanız yeterlidir.

// set up the AlertDialog
    AlertDialog alert = AlertDialog(
      title: Text("My title"),
      content: Text("This is my message."),
    );

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );

Flutter doctor’u çalıştırdığınızıda ”  cmdline-tools component is missing ” şeklinde hata alıyorsanız yapmanız gereken android studio –> Sdk Tools kısmından ” Android Sdk Command Line ” kurmanız yeterlidir.

Flutter’de textbox kullanımı ve aritmetik işlemlerin kullanımı için olmazsa olmazı olan basit bir hesap makinesi yapımı kodlarıdır.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Uygulama Başlığı",
      home: AnaEkran(),
    );
  }
}

class AnaEkran extends StatelessWidget {
  const AnaEkran({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App Bar Başlığı"),
      ),
      body: altislem(),
    );
  }
}

class altislem extends StatefulWidget {
  const altislem({Key? key}) : super(key: key);
  @override
  _altislemState createState() => _altislemState();
}

class _altislemState extends State<altislem> {
  String isim = 'Test';
  int a = 10, b = 5;
  TextEditingController t1 = TextEditingController(text: "0");
  TextEditingController t2 = TextEditingController(text: "0");

  void toplama() {
    setState(() {
      isim = (num.parse(t1.text) + num.parse(t2.text)).toString();
    });
  }

  void cikarma() {
    setState(() {
      isim = (num.parse(t1.text) - num.parse(t2.text)).toString();
    });
  }

  void carpma() {
    setState(() {
      isim = (num.parse(t1.text) * num.parse(t2.text)).toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(20),
      child: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text(isim),
        TextField(controller: t1),
        TextField(controller: t2),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              onPressed: toplama,
              child: Text('Topla'),
            ),
            RaisedButton(
              onPressed: cikarma,
              child: Text('Çıkar'),
            ),
            RaisedButton(
              onPressed: carpma,
              child: Text('Carp2'),
            )
          ],
        )
      ])),
    );
  }
}

Flutter ilk adımları attığınızda VsCode ekranında ilk bu kodları kullanıcaksınız.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Uygulama Başlığı",
      home: AnaEkran(),
    );
  }
}

class AnaEkran extends StatelessWidget {
  const AnaEkran({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App Bar Başlığı"),
      ),
      body: Container(
        margin: EdgeInsets.all(50),
        child: Center(
          child: Text('testt'),
        ),
      ),
    );
  }
}

Flutter’ın ve gerekli bileşenlerin nasıl kurulacağını anlatacağım.

Flutter İçin IDE Kurulumu

Öncelikle Flutter için bilgisayarımıza bir IDE kurmamız gerekiyor. İsteğe göre Android Studio veya Intelij Idea tercih edilebilir. Ben Android Studio’yu tercih ediyorum ve bunu tavsiye ediyorum.Çünkü Android için gerekli olan SDK’ları ve emülatörleri Android Studio’dan kullanacağız.

Kuruluma başlayalım.

Android Studio için : https://developer.android.com/studio

Intelij Idea için : https://www.jetbrains.com/idea/download/#section=windows linkinden işletim sisteminize uygun yükleme dosyasını indirin.

Ben anlatımıma Android Studio’ya göre yapacağım ama Intelij Idea için de benzer şeyler geçerlidir.

1. İndirdiğimiz .exe dosyasını çalıştıralım.

2. Bileşenleri seçip devam edelim.

3. Kurulumu yapacağımız yeri seçip devam edelim.

4. Install deyip devam edelim yine.

5. Kurulum tamamlandıktan sonra Finish’e tıklayalım.

6. Do not import setting seçeneğine tıklayalım ve OK diyelim.

7. SDK kurulumuna başlayalım. Tekrar Next deyip devam edelim.

8. Bir özelleştirme yapmayacağımız için Standard‘ı seçelim.

9. Kullamak istediğimiz temayı seçelim.

10. Finish ile devam edelim.

11. Bileşenler indirildiğinde kurulum tamamlanmış olacak.

12. Android Studio’yu açalım. Karşımıza gelen ekranın sağ altındaki Configure‘e tıklayıp alt seçeneklerden Plugins‘i seçiyoruz.

13. Arama satırında flutter yazıp ilk eklentiyi kuruyoruz.

14. Android Studio kurulumumuz tamam. Şimdi Flutter‘ı bilgisayarımıza kuralım.

İlk önce Flutter SDK‘sını kurmamız gerekiyor. https://flutter.dev/docs/get-started/install/windows adresinden SDK‘yı indirelim.

İndirdiğimiz zip dosyasını Winrar ile klasöre çıkaralım. Ve C veya D’de SDK adında bir klasöre taşıyalım.

15. Bilgisayarınızda Java’nın kurulu olduğu varsayıyorum. Şimdi Ortam Değişkenleri‘ne gerekli eklemeleri yapalım.

Sağ alttan Ortam Değişkenleri‘ne tıklayalım.

Açılan pencerede Yeni diyerek görseldeki gibi Java’nın kurulu olduğu dizini ve Flutter SDK’sını taşıdığınız klasörün yolunu yazarak kaydedelim.

16. Bu işlemleri tamamladıktan sonra CMD’yi çalıştırıp “flutter doctor”u çalıştırın. Eğer bu adımları doğru bir şekilde tamamladıysanız görseldeki gibi hiçbir sorunla karşılaşmayacaksınız.

Artık bir flutter uygulaması yapabilirsiniz.

Flutter uygulamanıza webview eklemek istiyorsanız aşağıdaki kodları kullanabilirsiniz.

Adım 1

Öncelikle uygulamanızın pubspec.yaml dosyasının içinde dependencies kısmına webview_flutter: ^2.0.12 şeklinde ekleme yapıyoruz.

dependencies:
  flutter:
    sdk: flutter

  webview_flutter: ^2.0.12

Adım 2

Sonrasında WebView’in kodlarını yazacağımız .dart dosyasına import işlemi yapıyoruz. Bu main.dart veya var olan bir dosya olabilir ya da yeni bir .dart dosyası açabilirsiniz.

import 'package:webview_flutter/webview_flutter.dart';

Adım 3

En son olarak artık WebView kodlarımızı aşağıdaki gibi ekliyoruz.

Eğer yeni bir .dart dosyası açmadıysanız:

class WebViewPage extends StatelessWidget {
  const WebViewPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Page'),
      ),
      body: WebView(
        initialUrl: 'https://www.sanaldata.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

Açtıysanız:

class WebViewPage extends StatefulWidget {
  const WebViewPage({Key? key}) : super(key: key);

  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State < WebViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Page'),
      ),
      body: WebView(
        initialUrl: 'https://www.sanaldata.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

kodlarını ekleyiniz.