Flutter’a Yeni Başlayanlar İçin Temel Bilgiler ve Püf Noktaları

 

Flutter dünyasına adım atmak mı istiyorsun? Harika bir karar! Flutter, Google tarafından geliştirilen, mobil, web ve masaüstü uygulamaları oluşturabileceğin güçlü bir framework. Yeni başlayanlar için oldukça kullanıcı dostu, ancak bazı temel bilgilerle çok daha hızlı ilerlemeni sağlayabilir. Hadi Flutter’a giriş yaparken bilmen gereken en temel şeyleri konuşalım.

1. Flutter Nedir?

Flutter, tek bir kod tabanıyla birden fazla platform için uygulama geliştirmene olanak tanır. Yani, Android ve iOS için ayrı ayrı uygulama yazmana gerek yok. “Write once, run anywhere” (Bir kez yaz, her yerde çalıştır) felsefesine sahip bir yapısı var. Dart programlama dili ile çalışır, ki bu dili öğrenmek oldukça kolaydır.

2. Widget nedir?

Flutter’ın temel yapı taşı “widget”lardır. Uygulamanın her parçası bir widget’tan oluşur. Bu, bir buton, bir metin ya da bir liste olabilir. Aslında, Flutter’daki her şey bir widget! Örneğin, bir uygulamanın ana görünümünü oluşturmak için Scaffold widget'ını kullanırsın. Bu, ekranın iskeletini oluşturur ve başlık, gövde, alt menü gibi kısımlar eklemeni sağlar.

Flutter’da sık kullanılan bazı widget’lar:

• Text: Yazı eklemek için.
• Container: Kapsayıcı bir yapı oluşturmak için.
• Row ve Column: Yatay ve dikey düzenlemeler yapmak için.
• ListView: Uzun veri listeleri göstermek için.

3. Stateless vs Stateful Widget

Widget’lar ikiye ayrılır: Stateless ve Stateful. Bunlar Flutter’ın olmazsa olmazıdır.

• Stateless Widget: Değişmeyen, sabit verileri gösterir. Örneğin, bir başlık metni ya da sabit bir simge.
• Stateful Widget: Değişken verilere ihtiyaç duyar. Kullanıcı etkileşimlerine göre değişen butonlar ya da formlar için kullanılır.

Başlangıçta Stateless ve Stateful arasındaki farkı anlamak biraz kafa karıştırıcı olabilir, ama kısa sürede farkı kavrayacaksın!

4. Hot Reload: Geliştiricilerin Süper Gücü

Bir şeyi yanlış mı yaptın? Endişelenme! Flutter’ın en büyük avantajlarından biri Hot Reload özelliğidir. Bu özellik, kodda yaptığın değişiklikleri saniyeler içinde uygulamana yansıtmanı sağlar. Yani sürekli uygulamayı yeniden başlatmana gerek yok. Kodunu yaz, kaydet, anında sonuçları gör!

5. Dart Dilini Öğrenmek

Flutter’ın dili olan Dart, öğrenmesi kolay ve modern bir dil. JavaScript ya da Java biliyorsan, Dart’a alışman çok kolay olacaktır. Dart, Flutter’da hem widget yapılarında hem de mantıksal işlemlerde kullanılır.

Püf Nokta: Dart diline hâkim olmak, Flutter’da daha hızlı ve etkili olmanı sağlar.

6. State Management (Durum Yönetimi)

Bir Flutter uygulaması büyüdükçe, durumu yönetmek karmaşık hale gelebilir. Yani, kullanıcı etkileşimlerine göre ekranların nasıl güncelleneceğini belirlemen gerekir. Başlangıç için basit setState metodunu kullanabilirsin, ama daha büyük projelerde Riverpod ya da Provider gibi paketlerle durumu yönetmek çok daha etkili olacaktır.

7. Paketler ile Gücüne Güç Kat!

Flutter dünyasında binlerce hazır paket var. Bu paketler, işini kolaylaştıran, projeni hızlandıran ve ek özellikler sunan hazır çözümlerdir. Örneğin:

• http paketi ile API’lerden veri çekebilirsin.
• shared_preferences ile uygulamada küçük veriler saklayabilirsin.

Paketleri keşfetmek için pub.dev adresini ziyaret edebilirsin.

8. Dokümantasyon En İyi Arkadaşın

Flutter, oldukça geniş bir dokümantasyona sahip. Google’ın resmi Flutter belgeleri, her türlü bilgiye ulaşabileceğin en güvenilir kaynaklardan biri. Aynı zamanda Stack Overflow ve GitHub gibi platformlarda da birçok soruya cevap bulabilirsin.

Püf Nokta: Flutter’ın dokümantasyonu yeni başlayanlar için bile oldukça anlaşılırdır. Takıldığın noktada mutlaka göz atmanı tavsiye ederim. Aşağıya linki bırakıyorum.

Flutter documentation

Get started with Flutter. Widgets, examples, updates, and API docs to help you write your first Flutter app.

docs.flutter.dev

9. Basit Projelerle Başla

Flutter’da öğrenmenin en iyi yolu, küçük projeler yaparak adım adım ilerlemektir. Basit bir to-do listesi uygulaması yapabilir ya da bir hava durumu uygulaması deneyebilirsin. Küçük projeler, Flutter’ın temel yapılarını öğrenmene ve pratiğini geliştirmeni sağlar.

Sonuç

Flutter’a yeni başlayanlar için bu püf noktaları ve bilgiler, seni kısa sürede daha ileri bir seviyeye taşıyacak. Unutma, Flutter öğrenmek biraz sabır gerektirir ama kodlama sürecindeki keyifli deneyimler seni motive edecektir. Flutter ile küçük projeler geliştirip, her adımda yeni şeyler öğrenerek kendini geliştirebilirsin. Ayrıca, Hot Reload ile hatalarını anında düzeltebilir ve hızla ilerleyebilirsin. İyi kodlamalar!

Okuduğun için teşekkür ederim.

Selin.

The 10 Most Common Errors and Solutions in Flutter: Simple Explanation for Beginners

In the first days when I started to learn Flutter, the error messages I received gave me a lot of trouble. There were moments when I didn’t know how to   deal with the warnings that appeared on the screen and where to start. Each new project brought a brand new error and solution process. Looking back now, these mistakes were actually the most valuable lessons I learnt. In this article, I would like to share the most common errors and their solutions while developing with Flutter, inspired by my own development processes.    If you are a newbie to Flutter like me, I hope this guide will make your work much easier.

1. “A RenderFlex overflowed by XX pixels”

When you see this error message, visualise a scene like this: You have filled the application screen with so many things that it has now overflowed and ‘overflowed’ off the edge of the screen! The size of the screen is not enough. This can happen, for example, when you put too many elements in a Row or Column widget. Think of it as if you filled a small box with too much stuff.

Solution: One of the things you can do in such cases is to make the page scrollable using SingleChildScrollView. So where the screen is not enough, the page can be scrolled up and down. Or you can wrap that multi-item area with Expanded or Flexible and let the widgets adjust themselves according to the size of the screen. In a way, this means ‘Spread out as much as there is space on the screen, don’t overflow’!

2. “setState() or markNeedsBuild() called during build”

Although this error seems a bit more technical, it is actually very simple: During the widget’s build process, you tell it ‘Let’s update again’ (you call setState). But you shouldn’t do this while the build is in progress, because Flutter hasn’t finished building the widget yet. If you update it then, it will throw an error saying ‘How can I update what I haven’t built yet?’.

Solution: You should call setState after the build is finished. So you need to be a little patient! It’s like saying ‘Let’s paint again’ before the child has finished a painting.

3. “Null check operator used on a null value”

This is a very common error and you will often encounter it in Flutter. You can think of it like this: You have an empty (null) glass in your hand, but you are trying to drink water from it. Flutter tells you, ‘This glass is empty, there is nothing to drink!’ In other words, you are trying to operate on a variable when there is no data in it.

Solution: To avoid this error, you should check whether the glass (variable) is empty. If it is empty, you should add something and continue. For example, you can give an alternative value with the ?? operator by saying ‘If empty, use this’. This way, when the glass is empty, you can take another glass and drink water.

4. “Another exception was thrown: Scaffold.of() called with a context that does not contain a Scaffold”

This can get a little confusing. Let’s say you use a Scaffold on the page. This is the basic structure of application pages, it has AppBar, Body and so on. But you are trying to reach it from somewhere outside this Scaffold structure. For example, you want to open a snackbar, but you call it from the wrong place. Flutter says ‘Look, there is no structure inside this page, you can’t reach it’.

Solution: In this case, you should either call Scaffold from the right context or you can perform the operation using ScaffoldMessenger. In short, you need to knock on the right door!

5. “NoSuchMethodError: The method ‘X’ was called on null”

In this mistake, Flutter says to you: ‘You are trying to do something to something that doesn’t exist.’ For example, you call a method on an object (say a car object), but there is no object! You want to start the car, but the car doesn’t exist so it can start.

Solution: You need to check if it is null. If there is no car, call the car first, then do the operation. If you think it might be null at that moment, use a safe check (?..).

6. “type ‘Future<dynamic>’ is not a subtype of type ‘Widget’”

Now this error is a bit more related to async operations. You have written a function and the result of this function will come in the future (Future), but you want to show this result on the screen immediately. But that result is not ready yet! Flutter says, ‘Look, you were supposed to give me a widget, but you returned Future.’

Solution: In this case, you need to use FutureBuilder to show the result when it is ready. So, you shouldn’t try to open an envelope until the postman brings a letter!

7. “setState() called after dispose()”

This error occurs when you tell a widget ‘Let’s update’ when it has finished its work and has been disposed of. But it is no longer there! You call setState, but the widget is not there.

Solution: What you need to do is to check if the widget still exists. You should be careful not to take action on a widget that has finished its work. It’s like asking for a report from a finished employee, it’s gone!

8. “RenderBox was not laid out”

This error occurs when a widget cannot calculate the screen size. It’s as if you were going to place a piece of furniture in your room, but you didn’t measure the dimensions of the room first! Then you get an error because you can’t place the furniture.

Solution: You should not place furniture (widget) without knowing the dimensions of the room (screen). To solve this, you can use LayoutBuilder or MediaQuery to find out the screen size and arrange your widgets accordingly. Thus, everything will fit in its place.

9. “Expected a value of type ‘X’, but got one of type ‘Y’”

This error is actually very simple: someone at work asked you for a red file, but you gave him a blue file! In other words, Flutter was expecting one type (e.g. int), but you gave it another type (e.g. String).

Solution: You need to make sure you are using types correctly. If a function expects int, you should give it int. You have to be careful not to give the wrong file.

10. “Too many positional arguments”

This is a case where Flutter says ‘You’ve given me too much, I can’t handle this much’. You get this error when you send too many parameters to a function or widget. For example, someone says ‘Give me an apple’ and you give them five apples!

Solution: Send as many parameters as the function or widget needs. So, you can solve the error by checking ‘What was asked of me, what did I give?’.

Although these mistakes were a bit frustrating at first, I realised how much I progressed in my projects as I solved each one. Remember, making mistakes is part of learning, and each mistake actually makes you a better developer. If you encounter the mistakes in this article, don’t panic! Understanding and solving them will make you even more proficient in Flutter. I hope this guide, inspired by my own development process, will help you. Good luck and remember, every mistake is a step forward!

Thanks for reading.

Selin.