Flutter Kurulumu Ve Mobil Uygulama Geliştirme

Flutter İle Mobil Uygulama Geliştirme

Flutter, Google tarafından geliştirilen açık kaynaklı bir mobil uygulama geliştirme framework'üdür. Dart programlama dilini kullanarak hızlı ve güzel mobil uygulamalar geliştirmenizi sağlar. Bu makalede Flutter'ı kurma adımlarını ve 20 adet Flutter örneğini bulabilirsiniz.

Flutter Kurulumu

Flutter'ı kurmak için aşağıdaki adımları izleyebilirsiniz:

1. Resmi Flutter websitesinden Flutter SDK'yı indirin.
2. İndirdiğiniz dosyayı uygun bir dizine çıkarın.
3. Path değişkenine Flutter'ı ekleyin (Windows için).
4. Flutter'ı çalıştırın ve gereksinimlerinizi kontrol edin: flutter doctor.
5. Gereksinimleri karşılamak için gerekli araçları yükleyin.

Örnek Flutter Kodları

İşte temel seviyede 20 adet Flutter kod örneği:

1. Merhaba Dünya:

void main() {
  print('Merhaba dünya!');
}

2. Buton ile Mesaj Gösterme:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Buton Örneği')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Butona tıklandı!');
            },
            child: Text('Butona Tıkla'),
          ),
        ),
      ),
    ));

3. Text ve Icon Kullanımı:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Text ve Icon Örneği')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(Icons.star, size: 50),
              Text('Merhaba Flutter!', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    ));

4. Liste Gösterimi:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Liste Örneği')),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Öğe ${index + 1}'),
              onTap: () {
                print('Tıklanan öğe: ${index + 1}');
              },
            );
          },
        ),
      ),
    ));

5. Grid Listesi:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Grid Liste Örneği')),
        body: GridView.count(
          crossAxisCount: 2,
          children: List.generate(4, (index) {
            return Center(
              child: Text(
                'Öğe ${index + 1}',
                style: Theme.of(context).textTheme.headline6,
              ),
            );
          }),
        ),
      ),
    ));

6. Stack Kullanımı:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Örneği')),
        body: Stack(
          children: <Widget>[
            Container(
              color: Colors.blue,
              width: double.infinity,
              height: 200,
            ),
            Positioned(
              bottom: 20,
              left: 20,
              child: Text(
                'Stack Örneği',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    ));

7. Navigation Drawer:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Navigation Drawer Örneği')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Başlık'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Öğe 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Öğe 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Ana Sayfa'),
      ),
    );
  }
}

8. TabBar ve TabBarView:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: DefaultTabController(
        length: 3,
      child: Scaffold(
          appBar: AppBar(
            title: Text('TabBar ve TabBarView Örneği'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('İçerik Tab 1')),
              Center(child: Text('İçerik Tab 2')),
              Center(child: Text('İçerik Tab 3')),
            ],
          ),
        ),
      ),
    ));
            

9. Form ve Text Input Kullanımı:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Form ve Text Input Örneği')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(labelText: 'Kullanıcı Adı'),
              ),
              SizedBox(height: 20),
              TextField(
                decoration: InputDecoration(labelText: 'Şifre'),
                obscureText: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // Form işlemleri
                },
                child: Text('Giriş Yap'),
              ),
            ],
          ),
        ),
      ),
    ));

10. HTTP İsteği ve JSON Kullanımı:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('HTTP İsteği ve JSON Örneği')),
        body: Center(
          child: FutureBuilder<Album>(
            future: fetchAlbum(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!.title);
              } else if (snapshot.hasError) {
                return Text('\${snapshot.error}');
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    ));

Future fetchAlbum() async {
  final response =
      await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
  if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('İstek başarısız oldu.');
  }
}

class Album {
  final int userId;
  final int id;
  final String title;

  Album({required this.userId, required this.id, required this.title});

  factory Album.fromJson(Map json) {
    return Album(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
    );
  }
}

11. Local Storage (SharedPreferences) Kullanımı:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String username = prefs.getString('username') ?? '';

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('SharedPreferences Örneği')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Kaydedilen Kullanıcı Adı: $username'),
            ElevatedButton(
              onPressed: () async {
                SharedPreferences prefs = await SharedPreferences.getInstance();
                await prefs.setString('username', 'Ahmet');
                print('Kullanıcı adı kaydedildi.');
              },
              child: Text('Kullanıcı Adı Kaydet'),
            ),
          ],
        ),
      ),
    ),
  ));
}

12. SQLite Kullanımı:

import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final database = openDatabase(
    join(await getDatabasesPath(), 'my_database.db'),
    onCreate: (db, version) {
      return db.execute(
        'CREATE TABLE users(id INTEGER PRIMARY KEY, name TEXT, age INTEGER)',
      );
    },
    version: 1,
  );

  await database.then((Database db) async {
    await db.insert(
      'users',
      {'id': 1, 'name': 'Ahmet', 'age': 30},
      conflictAlgorithm: ConflictAlgorithm.replace,
    );

    List> users = await db.query('users');

    print(users);
  });

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('SQLite Örneği')),
      body: Center(
        child: Text('SQLite veritabanı örneği'),
      ),
    ),
  ));
}

13. Animasyon Kullanımı:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Animasyon Örneği')),
    body: Center(
      child: TweenAnimationBuilder(
        tween: Tween(begin: 0.0, end: 1.0),
        duration: Duration(seconds: 2),
        builder: (context, value, child) {
          return Opacity(
            opacity: value,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          );
        },
      ),
    ),
  ),
));

14. Custom Widget Oluşturma:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Custom Widget Örneği')),
    body: Center(
      child: MyCustomWidget(
        text: 'Merhaba Flutter!',
        backgroundColor: Colors.green,
      ),
    ),
  ),
));

class MyCustomWidget extends StatelessWidget {
  final String text;
  final Color backgroundColor;

  const MyCustomWidget({
    Key? key,
    required this.text,
    required this.backgroundColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: backgroundColor,
      padding: EdgeInsets.all(20),
      child: Text(
        text,
        style: TextStyle(fontSize: 24, color: Colors.white),
      ),
    );
  }
}

15. State Management (Provider Kullanımı):

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

void main() => runApp(
  ChangeNotifierProvider(
    create: (context) => Counter(),
    child: MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Kullanımı')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Consumer(
                builder: (context, counter, child) => Text(
                  'Tıklama Sayısı: \${counter.count}',
                  style: TextStyle(fontSize: 24),
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  Provider.of(context, listen: false).increment();
                },
                child: Text('Arttır'),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
);

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

Bu makalede Flutter'ın temellerini öğrenmek için 20 farklı örnek kod sunduk. Her bir örnek Dart dilinde yazılmış ve

Flutter'ı kullanarak mobil uygulama geliştirmeye başlayabilirsiniz. Her bir örneği inceleyerek ve üzerinde oynayarak Flutter'ı daha iyi öğrenebilirsiniz.

© 2024 Flutter Öğrenme Makalesi - Tüm Hakları Saklıdır.