DEV Community

Cover image for Flutter: Best Practices ­čĺź ­čîî ÔťĘ
G├╝lsen Keskin
G├╝lsen Keskin

Posted on • Updated on

 

Flutter: Best Practices ­čĺź ­čîî ÔťĘ

Best practice'ler, bir alanda kabul edilmi┼č profesyonel standartlard─▒r ve herhangi bir programlama dilinin kod kalitesini, okunabilirli─čini, s├╝rd├╝r├╝lebilirli─čini ve sa─člaml─▒─č─▒n─▒ artt─▒r─▒r.

Adland─▒rma kural─▒:

Class, enum, typedef ve extension adlar─▒ UpperCamelCase olmal─▒d─▒r.

class MainScreen { ... }
enum MainItem { .. }
typedef Predicate<T> = bool Function(T value);
extension MyList<T> on List<T> { ... }
Enter fullscreen mode Exit fullscreen mode

Kitapl─▒klar, paketler, klas├Ârler ve kaynak dosya adlar─▒ snake_case(lowercase_with_underscores) olmal─▒d─▒r.

library firebase_dynamic_links;
import 'socket/socket_manager.dart';
Enter fullscreen mode Exit fullscreen mode

De─či┼čken, constant(sabit), paremetre, ve adland─▒r─▒lm─▒┼č parametre isimleri lowerCamelCase olmal─▒d─▒r

var item;
const bookPrice = 3.14;
final urlScheme = RegExp('^([a-z]+):');
void sum(int bookPrice) {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

lib i├žerisindeki dosyalar i├žin g├Âreli i├že aktarmay─▒ kullan─▒n

Relative ve absolute importlar birlikte kullan─▒ld─▒─č─▒nda, ayn─▒ s─▒n─▒f iki farkl─▒ yoldan import edildi─činde kar─▒┼č─▒kl─▒k meydana gelebilir. Bu durumdan ka├ž─▒nmak i├žin lib/klas├Ârde relative path kullanmal─▒y─▒z.

// Yapma
import 'package:demo/src/utils/dialog_utils.dart';


// Yap
import '../../../utils/dialog_utils.dart';
Enter fullscreen mode Exit fullscreen mode

Class ├╝yeleri i├žin t├╝rleri belirtin:

De─čer t├╝r├╝ (value type) bilindi─činde her zaman ├╝yenin t├╝r├╝n├╝ belirtin.
M├╝mk├╝n oldu─čunca var kullanmaktan ka├ž─▒n─▒n.

//Yapma
var item = 10;
final car = Car();
const timeOut = 2000;


//Yap
int item = 10;
final Car bar = Car();
String name = 'john';
const int timeOut = 20;
Enter fullscreen mode Exit fullscreen mode

as operat├Âr├╝n├╝ kullanmaktan ka├ž─▒n─▒n bunun yerine is operat├Âr├╝n├╝ kullan─▒n

Genellikle, as cast operat├Âr├╝, cast m├╝mk├╝n de─čilse bir istisna atar. Bir istisnan─▒n at─▒lmas─▒n─▒ ├Ânlemek i├žin is operat├Âr├╝n├╝ kullan─▒n.

//Yapma
(item as Animal).name = 'Lion';


//Yap
if (item is Animal)
  item.name = 'Lion';
Enter fullscreen mode Exit fullscreen mode

Conditional expression (ko┼čullu ifade) yerine if ko┼čulunu kullan─▒n

├ço─ču zaman, Sat─▒r ve S├╝tun'daki baz─▒ ko┼čullara dayal─▒ olarak bir widget olu┼čturmam─▒z gerekir. Conditional expression(ko┼čullu ifade) her durumda null d├Ând├╝r├╝r bu sebeple if ko┼čulunu kullanmak daha iyi bir kullan─▒md─▒r.

//Yapma
Widget getText(BuildContext context) {
  return Row(
    children: [
      Text("Hello"),
      Platform.isAndroid ? Text("Android") : null,
      Platform.isAndroid ? Text("Android") : SizeBox(),
      Platform.isAndroid ? Text("Android") : Container(),
    ]
  );
}


//Yap
Widget getText(BuildContext context) {
  return Row(
      children: 
      [
        Text("Hello"), 
        if (Platform.isAndroid) Text("Android")
      ]
  );
}
Enter fullscreen mode Exit fullscreen mode

?? ve ?. operat├Ârlerini kullan─▒n

if null yerine ?? operat├Âr├╝n├╝, null aware yerine ise ?. operat├Âr├╝n├╝ kullan─▒n.

//Kullanma
v = a == null ? b : a;

//Kullan
v = a ?? b;


//Kullanma
v = a == null ? null : a.b;

//Kullan
v = a?.b;
Enter fullscreen mode Exit fullscreen mode

Spread operat├Âr├╝n├╝ kullan─▒n

Mevcut ├Â─čeler ba┼čka bir dizide depoland─▒─č─▒nda, spread collection s├Âzdizimi daha basit koda sa─člar.

//Kullanma
var y = [4,5,6];
var x = [1,2];
x.addAll(y);


//Kullan
var y = [4,5,6];
var x = [1,2,...y];
Enter fullscreen mode Exit fullscreen mode

Cascades operat├Âr├╝n├╝ kullan─▒n

Ayn─▒ nesne ├╝zerinde bir dizi i┼člem yapmak istiyorsan─▒z Cascades(..) operat├Âr├╝n├╝ kullan─▒n.

// Kullanma
var path = Path();
path.lineTo(0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.close();  


// Kullan
var path = Path()
..lineTo(0, size.height)
..lineTo(size.width, size.height)
..lineTo(size.width, 0)
..close(); 
Enter fullscreen mode Exit fullscreen mode

Raw string kullan─▒n

Yaln─▒zca string bir ifade i├žinde \ ve $ kullanman─▒z gerekiyorsa raw string kullan─▒n.

//Kullanma
var s = 'This is demo string \\ and \$';


//Kullan
var s = r'This is demo string \ and $';
Enter fullscreen mode Exit fullscreen mode

De─či┼čkenleri null atayarak ba┼člatmay─▒n

Dart'ta, de─čeri belirtilmedi─činde de─či┼čken otomatik olarak null olarak ba┼člat─▒l─▒r, bu nedenle null eklemek gereksizdir.

//Kullanma
int _item = null;


//Kullan
int _item;
Enter fullscreen mode Exit fullscreen mode

Expression function ifadesini kullan─▒n

Yaln─▒zca bir ifade i├žeren i┼člevler i├žin expression function kullanabilirsiniz. ( => Ok) g├Âsterimi, expression function i├žin kullan─▒l─▒r.

//Kullanma
get width {
  return right - left;
}
Widget getProgressBar() {
  return CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  );
}


//Kullan
get width => right - left;
Widget getProgressBar() => CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
    );
Enter fullscreen mode Exit fullscreen mode

print() ├ža─čr─▒lar─▒ndan ka├ž─▒n─▒n

print() ve debugPrint() konsola bir ┼čey yazd─▒rmak i├žin kullan─▒l─▒r.
print() kullan─▒yorsan─▒z ve ├ž─▒kt─▒n─▒z ├žok fazlaysa, Android bazen baz─▒ log sat─▒rlar─▒ atar. Bunu ├Ânlemek i├žindebugPrint() kullan─▒n.
Log datan─▒z ├žok fazla veri i├žeriyorsa, dart:developer log() kullan─▒n.
Bu, log ├ž─▒kt─▒s─▒na biraz daha ayr─▒nt─▒ d├╝zeyi ve bilgi eklemenize olanak sa─člar.

Private olmayan local tan─▒mlay─▒c─▒lar i├žin isimlendirmelerin ba┼č─▒nda alt ├žizgi (_) kullanmaktan ka├ž─▒n─▒n.

Dizeleri olu┼čturmak i├žin enterpolasyon kullan─▒n
Bir string olu┼čturmak i├žin + kullanarak uzun zincirler olu┼čturmak yerine string ifadeyi daha temiz ve daha k─▒sa tutmak i├žin $ enterpolasyonu kullan─▒n.

//Kullanma
var description = 'Hello, ' + name + '! You are ' + (year - birth).toString() + ' years old.';


// Kullan
var description = 'Hello, $name! You are ${year - birth} years old.';
Enter fullscreen mode Exit fullscreen mode

Bir tear-off i┼člemi yap─▒ld─▒─č─▒nda lambda olu┼čturmay─▒n

Kendisine iletilen ayn─▒ arg├╝manlara sahip methodu ├ža─č─▒ran bir fonksiyonunuz varsa, ├ža─čr─▒y─▒ manuel olarak bir lambda i├žine sarman─▒z gerekmez.

List<String> names=[]

// Kullanma
names.forEach((name) {
  print(name);
});


// Kullan
names.forEach(print);
Enter fullscreen mode Exit fullscreen mode

async/await ifadelerini kullan─▒n

Asenkron kodun okunmas─▒ ve hatalar─▒n ay─▒klanmas─▒ zordur. async/ await s├Âzdizimi okunabilirli─či art─▒r─▒r.

// Kullanma
Future<int> countActiveUser() {
  return getActiveUser().then((users) {

    return users?.length ?? 0;

  }).catchError((e) {
    log.error(e);
    return 0;
  });
}


// Kullan
Future<int> countActiveUser() async {
  try {
    var users = await getActiveUser();

    return users?.length ?? 0;

  } catch (e) {
    log.error(e);
    return 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Widget'lar─▒ alt Widget'lara ay─▒r─▒n.

Bir setState() durumu ├ža─čr─▒ld─▒─č─▒nda, t├╝m alt widget'lar yeniden olu┼čturulur. Bu nedenle, bir widget'─▒ k├╝├ž├╝k widget ├Â─čelerine b├Âlerek, setState() ifadesini sadece aray├╝z├╝n de─či┼čmesi gerekti─či yerlerde ├ža─č─▒rabilirsiniz.

Scaffold(
  appBar: CustomAppBar(title: "Verify Code"), // Sub Widget
  body: Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        TimerView( // Sub Widget
            key: _timerKey,
            resendClick: () {})
      ],
    ),
  ),
)
Enter fullscreen mode Exit fullscreen mode

Uzun bir liste i├žin ListView.builder kullan─▒n

Sonsuz veya ├žok b├╝y├╝k listelerle ├žal─▒┼č─▒rken, performans─▒ art─▒rmak i├žin genellikle bir ListView builder kullan─▒lmas─▒ ├Ânerilir .
Varsay─▒lan olarak ListView constructor , t├╝m listeyi bir kerede olu┼čturur. ListView.builder lazy bir liste olu┼čturur ve kullan─▒c─▒ listeyi a┼ča─č─▒ kayd─▒r─▒rken, Flutter iste─če ba─čl─▒ widget'lar olu┼čturur.

Widget'larda Const kullan─▒n

SetState ├ža─čr─▒s─▒ yap─▒ld─▒─č─▒nda bir widget'─▒n de─či┼čmesini istemiyorsan─▒z onu constant olarak tan─▒mlay─▒n. Bu durum Widget'─▒n yeniden olu┼čturulmas─▒n─▒ engelleyerek performans─▒ art─▒r─▒r.

Container(
      padding: const EdgeInsets.only(top: 10),
      color: Colors.black,
      child: const Center(
        child: const Text(
          "No Data found",
          style: const TextStyle(fontSize: 30, fontWeight: FontWeight.w800),
        ),
      ),
    );
Enter fullscreen mode Exit fullscreen mode

Umar─▒m bu yaz─▒, uygulaman─▒z─▒n performans─▒n─▒ art─▒r─▒rken Flutter kodunuzu daha okunakl─▒ hale getirmek i├žin size birka├ž fikir vermi┼čtir. ­čĺÖÔťĘ

reference

Top comments (0)

Regex for lazy developers

regex for lazy devs

You know who you are. Sorry for the callout ­čść