Bu yazının amacı dart ya da flutter ile ilgili bir konu anlatımı yapmaktan ziyade basit bir alıştırma yapmak ve genel olarak çalışan bir uygulama oluşturmaya çalışmak. Bu sebeple bazı kavramlar hakkında çok detaylı bilgi bulamayabilirsiniz. Flutter Documentation kısmından ya da Flutter SDK kısmından detaylı bilgilere ulaşabilirsiniz.

Öncelikle nasıl bir uygulama yapmak istediğimize karar vermeliyiz. İlk uygulamamız için daha önce yapılmış hazır bir uygulama kullanmanın daha iyi olacağını düşündüm. basit bir şekilde not alabileceğimiz ve önem derecesini belirtebileceğimiz hazır uygulamayı buraya tıklayarak uygulamayı indirip düzenlemeye başlayabilirsiniz.

  • Ancak şu an Flutter projeyi çalıştırırken hata veriyor. Bu duruma karşı farklı çözüm yöntemleri olmakla birlikte bana kalırsa en kolay yöntem proje dosyasını Visual Code Studio ile açmadan önce Android Studio ile açmak. Android Studio bu sorunu otomatik olarak ortadan kaldırıyor.

indirdiğimiz projeyi Visual Studio Code ile açtıktan sonra kodları incelemeye başlayabiliriz. İncelediğimiz uygulamaya kendi isteğimize göre farklı bir iki özellik daha ekleyeceğiz.

Öncelikle ilk kez bir uygulama açtığınızda da kendiliğinden oluşan “main.dart” dosyasına bakalım.

material.dart’ı import ediyoruz. material.dart flutterda kullanacağımız çoğu widget’ın ortak olarak import edildiği bir klasör F12 yaparak baktığımızda nelerin import edildiğini görebiliriz.

library material;

export 'src/material/about.dart';
export 'src/material/animated_icons.dart';
export 'src/material/app.dart';
export 'src/material/app_bar.dart';
export 'src/material/app_bar_theme.dart';
export 'src/material/arc.dart';
export 'src/material/back_button.dart';
export 'src/material/banner.dart';
export 'src/material/banner_theme.dart';
export 'src/material/bottom_app_bar.dart';
export 'src/material/bottom_app_bar_theme.dart';
export 'src/material/bottom_navigation_bar.dart';
export 'src/material/bottom_sheet.dart';
export 'src/material/bottom_sheet_theme.dart';
export 'src/material/button.dart';
export 'src/material/button_bar.dart';
export 'src/material/button_theme.dart';
export 'src/material/card.dart';
export 'src/material/card_theme.dart';
export 'src/material/checkbox.dart';
export 'src/material/checkbox_list_tile.dart';
export 'src/material/chip.dart';
export 'src/material/chip_theme.dart';
export 'src/material/circle_avatar.dart';
export 'src/material/color_scheme.dart';
export 'src/material/colors.dart';
export 'src/material/constants.dart';
export 'src/material/data_table.dart';
export 'src/material/data_table_source.dart';
export 'src/material/date_picker.dart';
export 'src/material/debug.dart';
export 'src/material/dialog.dart';
export 'src/material/dialog_theme.dart';
export 'src/material/divider.dart';
export 'src/material/divider_theme.dart';
export 'src/material/drawer.dart';
export 'src/material/drawer_header.dart';
export 'src/material/dropdown.dart';
export 'src/material/expand_icon.dart';
export 'src/material/expansion_panel.dart';
export 'src/material/expansion_tile.dart';
export 'src/material/feedback.dart';
export 'src/material/flat_button.dart';
export 'src/material/flexible_space_bar.dart';
export 'src/material/floating_action_button.dart';
export 'src/material/floating_action_button_location.dart';
export 'src/material/floating_action_button_theme.dart';
export 'src/material/flutter_logo.dart';
export 'src/material/grid_tile.dart';
export 'src/material/grid_tile_bar.dart';
export 'src/material/icon_button.dart';
export 'src/material/icons.dart';
export 'src/material/ink_decoration.dart';
export 'src/material/ink_highlight.dart';
export 'src/material/ink_ripple.dart';
export 'src/material/ink_splash.dart';
export 'src/material/ink_well.dart';
export 'src/material/input_border.dart';
export 'src/material/input_decorator.dart';
export 'src/material/list_tile.dart';
export 'src/material/material.dart';
export 'src/material/material_button.dart';
export 'src/material/material_localizations.dart';
export 'src/material/material_state.dart';
export 'src/material/mergeable_material.dart';
export 'src/material/outline_button.dart';
export 'src/material/page.dart';
export 'src/material/page_transitions_theme.dart';
export 'src/material/paginated_data_table.dart';
export 'src/material/popup_menu.dart';
export 'src/material/popup_menu_theme.dart';
export 'src/material/progress_indicator.dart';
export 'src/material/radio.dart';
export 'src/material/radio_list_tile.dart';
export 'src/material/raised_button.dart';
export 'src/material/range_slider.dart';
export 'src/material/refresh_indicator.dart';
export 'src/material/reorderable_list.dart';
export 'src/material/scaffold.dart';
export 'src/material/scrollbar.dart';
export 'src/material/search.dart';
export 'src/material/selectable_text.dart';
export 'src/material/shadows.dart';
export 'src/material/slider.dart';
export 'src/material/slider_theme.dart';
export 'src/material/snack_bar.dart';
export 'src/material/snack_bar_theme.dart';
export 'src/material/stepper.dart';
export 'src/material/switch.dart';
export 'src/material/switch_list_tile.dart';
export 'src/material/tab_bar_theme.dart';
export 'src/material/tab_controller.dart';
export 'src/material/tab_indicator.dart';
export 'src/material/tabs.dart';
export 'src/material/text_field.dart';
export 'src/material/text_form_field.dart';
export 'src/material/text_selection.dart';
export 'src/material/text_theme.dart';
export 'src/material/theme.dart';
export 'src/material/theme_data.dart';
export 'src/material/time.dart';
export 'src/material/time_picker.dart';
export 'src/material/toggle_buttons.dart';
export 'src/material/toggle_buttons_theme.dart';
export 'src/material/toggleable.dart';
export 'src/material/tooltip.dart';
export 'src/material/tooltip_theme.dart';
export 'src/material/typography.dart';
export 'src/material/user_accounts_drawer_header.dart';
export 'widgets.dart';

sonrasında note_list.dart’ı import ediyoruz. Burada screen klasörü uygulama yazılırken açılmış farklı bir dosya. Dosyanın içinde ise note_list.dart ve note_details.dart dosyaları var. Burada note_list.dart’ı import ediyoruz.

Bunun sebebi

home: NoteList(),

yazdığımız kısım. Bu kısmı yazdığınızda Flutter güncel versiyonlarında otomatik olarak import ediyor.

import 'package:flutter/material.dart';
import 'screens/note_list.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NoteKeeper',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.black,
        primaryColorDark: Colors.black,
        primaryColorLight: Colors.white,
      ),
      home: NoteList(),
    );
  }
}

runApp daha önceden tanımlanmış bir fonksiyon. Nerede tanımlandığını görmek için F12 ya da sağ tıklayarak “Go to definition” seçeneğiyle nerede tanımlandığını görebilirsiniz. Bunu parantez içerisindeki metodu, class’ı ya da içeriği çalıştırıyor diye tanımlayabiliriz.

Altında ise çalıştırmak istediğimiz şeyi(widget) tanımladığımız alan var. Öncelikle bunun bir class olduğunu ve ismini söylüyoruz. Sonrasında extends sayesinde StatelessWidget’tan kalıtım(inherit) yapıyoruz.

StatelessWidget’ın anlamı o sayfanın uygulama içerisinde kullanıcı tarafından değiştirilemeyen şeyler içeriyor olmasıdır. Örneğin bu kodda olduğu gibi MaterialApp in içindeki title, theme(içerisinideki görsel değişkenler; renk,nesne şekilleri …) bunlar kullanıcı tarafından değiştirilemeyen şeylerdir.

StatefulWidget da ise kullanıcı tarafından değiştirilebilen şeyleri gösterir. Örneğin Flutter’ın ilk açtığımızda örnek uygulama olarak gösterdiği buttona basılınca sayıyı arttıran uygulamada artan sayı textView’ı StatefullWidgettır.(Kullanıcı tarafından değiştirilebilir.)

Bu kodda çalıştırdığımız şey (runApp sayesinde) MyApp adında bir class bunu yazdıktan sonra MyApp isimli class’ı oluşturmaya başlıyoruz. Yukarıda bahsettiğim şekilde statelessWidget ya da StatefullWidget olarak extends işlemini yapıyoruz.

Sonrasında ise widget build işlemi ile bir widget oluşturmaya başlıyoruz.

  • BuildContext yine Flutter’ın içerisinde var olan bir method F12 yaptığınızda dosya uzantısından görebilirsiniz. BuildContext aslında uygulamada bir activity tanımlamamızı sağlayan widget’dır.

sonrasında ise oluşturduğumuz widget’ın return sayesinde bir sonuç getirmesini sağlıyoruz. Burada MaterialApp tanımlayıp onun özelliklerini girmeye başlıyoruz.Özellikler üst kısımda material.dart’ı import ettiğimiz için buradaki theme i material.dart üzerinden tanımlayabiliyoruz.

Bunları tanımladıktan sonra MaterialApp’in içine son olarak

home: NoteList(),

kısmını ekliyoruz. NoteList’i bir sonraki yazıda note_list.dart dosyasında bir sınıf olarak tanımlayacağız.

Kısaca yazdıklarımızı özetlemek gerekirse:

  1. Gerekli package ya da dosyaları import ediyoruz.(Kodun bir kısmını yazdıktan sonra Flutter sizin için o package’i otomatik olarak import ediyor.)
  2. void main(){ runApp(…….)) sayesinde bir uygulama açıldığı an bir widget (burada class) çalıştırıyoruz.
  3. Sonrasında çalıştırdığımız widget’ı tanımlıyoruz. class MyApp extends StatelessWidget {…………………………………….}
  4. Widget build(BuildContext context) {return MaterialApp(……) kısmında ise bir ekran(Activity) tanımlıyoruz.
  5. home: NoteList(), yazarak. note_list.dart dosyasında bulunan NoteList class’ını çağırmış oluyoruz.

Write A Comment