Flutter Eğitim: En Çok Kullanılan Kodlar
1. Temel Widget Kullanımı
Flutter'da temel bir uygulama oluşturmak için kullanılan kod örneği.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Merhaba Dünya!', style: TextStyle(fontSize: 24)),
],
),
),
);
}
}
2. Buton Kullanımı
Flutter'da bir butonun nasıl kullanılacağını gösterir.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Button Örneği'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
print('Butona tıklandı!');
},
child: Text('Tıklayın'),
),
),
);
}
}
3. Liste Görüntüleme
Liste oluşturma ve görüntüleme kod örneği.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Liste Örneği'),
),
body: ListView(
children: [
ListTile(
leading: Icon(Icons.star),
title: Text('Birinci Öğe'),
),
ListTile(
leading: Icon(Icons.star),
title: Text('İkinci Öğe'),
),
],
),
);
}
}
4. Form ve TextField Kullanımı
Form ve metin giriş alanlarını kullanarak veri toplama örneği.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
final _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form ve TextField Örneği'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Adınızı girin',
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
print('Girilen Ad: ${_controller.text}');
},
child: Text('Gönder'),
),
],
),
),
);
}
}
5. İkon Kullanımı
Çeşitli ikonların nasıl kullanılacağını gösteren örnek.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('İkon Örneği'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home, size: 50, color: Colors.blue),
SizedBox(width: 20),
Icon(Icons.favorite, size: 50, color: Colors.red),
],
),
),
);
}
}
6. Drawer (Yan Menü) Kullanımı
Yan menü kullanarak navigasyon işlemi yapma.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Örneği'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Başlık', style: TextStyle(color: Colors.white)),
),
ListTile(
title: Text('Birinci Menü'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: Center(
child: Text('Drawer Örneği'),
),
);
}
}
7. Bottom Navigation Bar Kullanımı
Alt kısımdaki navigasyon çubuğu örneği.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Örneği'),
),
body: Center(
child: Text('Seçilen Sekme: $_selectedIndex'),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Ana Sayfa',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Ara',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}
8. GridView Kullanımı
Bir grid (ızgara) yapısını nasıl oluşturabileceğinizi gösterir.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GridView Örneği'),
),
body: GridView.count(
crossAxisCount: 2,
children: [
Container(color: Colors.red, child: Center(child: Text('1'))),
Container(color: Colors.green, child: Center(child: Text('2'))),
Container(color: Colors.blue, child: Center(child: Text('3'))),
Container(color: Colors.orange, child: Center(child: Text('4'))),
],
),
);
}
}
9. Image Kullanımı
Bir resmi ekranda görüntüleme örneği.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Örneği'),
),
body: Center(
child: Image.network('https://example.com/image.png'),
),
);
}
}
10. DatePicker Kullanımı
Bir tarih seçici widget'ının kullanımı.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
DateTime _selectedDate = DateTime.now();
Future _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: _selectedDate,
firstDate: DateTime(2000),
lastDate: DateTime(2101),
) ?? _selectedDate;
setState(() {
_selectedDate = picked;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DatePicker Örneği'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Seçilen Tarih: ${_selectedDate.toLocal()}'),
ElevatedButton(
onPressed: () => _selectDate(context),
child: Text('Tarih Seç'),
),
],
),
),
);
}
}
11. Switch (Anahtar) Kullanımı
Bir anahtar widget'ını kullanarak veri durumu yönetimi örneği.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
bool _isSwitched = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Switch Örneği'),
),
body: Center(
child: Switch(
value: _isSwitched,
onChanged: (value) {
setState(() {
_isSwitched = value;
});
},
),
),
);
}
}
12. Slider Kullanımı
Bir kaydırıcı widget'ı ile veri kontrolü örneği.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
double _sliderValue = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Slider Örneği'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Slider(
value: _sliderValue,
min: 0,
max: 100,
divisions: 10,
label: _sliderValue.round().toString(),
onChanged: (value) {
setState(() {
_sliderValue = value;
});
},
),
Text('Değer: $_sliderValue'),
],
),
),
);
}
}
13. FutureBuilder Kullanımı
Gecikmeli veri çekimi için FutureBuilder kullanımı.
class MyHomePage extends StatelessWidget {
Future fetchData() async {
await Future.delayed(Duration(seconds: 2));
return 'Veri Yüklenmiş!';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FutureBuilder Örneği'),
),
body: Center(
child: FutureBuilder(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Hata: ${snapshot.error}');
} else {
return Text('Sonuç: ${snapshot.data}');
}
},
),
),
);
}
}
14. StreamBuilder Kullanımı
Akış (stream) ile veri yönetimi örneği.
class MyHomePage extends StatelessWidget {
Stream numberStream() async* {
for (int i = 1; i <= 5; i++) {
await Future.delayed(Duration(seconds: 1));
yield i;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('StreamBuilder Örneği'),
),
body: Center(
child: StreamBuilder(
stream: numberStream(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Hata: ${snapshot.error}');
} else {
return Text('Sayı: ${snapshot.data}');
}
},
),
),
);
}
}
15. Animation (Animasyon) Kullanımı
Temel animasyon örneği.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
);
_controller.repeat(reverse: true);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animasyon Örneği'),
),
body: Center(
child: FadeTransition(
opacity: _animation,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
16. Navigator (Navigasyon) Kullanımı
Bir sayfadan diğerine geçiş yapma örneği.
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('İlk Sayfa'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Text('İkinci Sayfaya Git'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('İkinci Sayfa'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Geri Dön'),
),
),
);
}
}
17. TabBar Kullanımı
TabBar ve TabBarView ile sekmeler oluşturma.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('TabBar Örneği'),
bottom: TabBar(
tabs: [
Tab(text: 'Birinci'),
Tab(text: 'İkinci'),
Tab(text: 'Üçüncü'),
],
),
),
body: TabBarView(
children: [
Center(child: Text('Birinci Sekme')),
Center(child: Text('İkinci Sekme')),
Center(child: Text('Üçüncü Sekme')),
],
),
),
);
}
}
18. AnimatedContainer Kullanımı
Animasyonlu bir konteyner örneği.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
bool _expanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedContainer Örneği'),
),
body: Center(
child: AnimatedContainer(
duration: Duration(seconds: 1),
width: _expanded ? 200 : 100,
height: _expanded ? 200 : 100,
color: _expanded ? Colors.blue : Colors.red,
child: Center(child: Text('Animasyon')),
curve: Curves.fastOutSlowIn,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_expanded = !_expanded;
});
},
child: Icon(Icons.play_arrow),
),
);
}
}
19. SnackBar Kullanımı
Bir SnackBar (kısa bildirim) gösterme.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SnackBar Örneği'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Bu bir SnackBar!')),
);
},
child: Text('SnackBar Göster'),
),
),
);
}
}
20. CircularProgressIndicator Kullanımı
Bir yüklenme göstergesi örneği.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CircularProgressIndicator Örneği'),
),
body: Center(
child: CircularProgressIndicator(),
),
);
}
}
21. ListView.builder Kullanımı
Dinamik olarak liste oluşturan örnek.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView.builder Örneği'),
),
body: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text('Öğe $index'),
);
},
),
);
}
}
22. Padding Kullanımı
Padding widget'ı ile iç boşluk ekleme.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Padding Örneği'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Container(
color: Colors.blue,
child: Text('Padding Eklenmiş Metin'),
),
),
);
}
}
23. Align Kullanımı
Align widget'ı ile konumlandırma.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Align Örneği'),
),
body: Align(
alignment: Alignment.bottomRight,
child: Container(
color: Colors.red,
child: Text('Sağ Alt Köşe'),
),
),
);
}
}
24. Expanded Kullanımı
Expanded widget'ı ile genişletme örneği.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expanded Örneği'),
),
body: Row(
children: [
Expanded(
child: Container(
color: Colors.red,
height: 100,
),
),
Expanded(
child: Container(
color: Colors.blue,
height: 100,
),
),
],
),
);
}
}
25. Container ile Border Kullanımı
Bir container widget'ına border ekleme.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Border Örneği'),
),
body: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2),
),
child: Text('Border Ekleme'),
),
);
}
}
26. GestureDetector Kullanımı
Dokunma olaylarını yakalamak için GestureDetector kullanımı.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GestureDetector Örneği'),
),
body: GestureDetector(
onTap: () {
print('Dokunuldu!');
},
child: Container(
color: Colors.green,
child: Center(child: Text('Dokunulabilir Alan')),
),
),
);
}
}
27. Hero Animations Kullanımı
Hero animasyonları ile iki ekran arasında geçiş yapma.
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hero Örneği - İlk Sayfa'),
),
body: Center(
child: Hero(
tag: 'hero-tag',
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hero Örneği - İkinci Sayfa'),
),
body: Center(
child: Hero(
tag: 'hero-tag',
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
),
),
);
}
}
28. CustomScrollView Kullanımı
Özelleştirilmiş kaydırma görünümü oluşturma.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CustomScrollView Örneği'),
),
body: CustomScrollView(
slivers: [
SliverAppBar(
title: Text('SliverAppBar'),
floating: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Öğe $index'),
);
},
childCount: 100,
),
),
],
),
);
}
}
Etiketler
Mobil Uygulama Geliştirme