Flutter Kolay Arayüz Tasarımları

Uygulamamız için arayüz tasarımlarını hızlı ve kolay bir şekilde yapabileceğimiz FlutterViz ve FlutterFlow siteleri üzerinde ayrıca bu siteler yeni uygulamalar yaparken hazır, örnek uygulamalarda bulundurmaktadır.

FlutterViz yeni uygulama oluşturma arayüzü

FlutterFlow yeni uygulama oluşturma arayüzü

FlutterFlow üzerinden yapılan bir uygulamada ekranın sol tarafında bulunan “Build” başlığı altında “Widget Palette” sekmesinde kullanılabilecek widget’lar,

FlutterFlow Widget Palette

“Widget Tree” sekmesi altında sayfalar ve bu sayfalardaki widget hiyerarşisi,

FlutterFlow Widget Tree

“Storyboard” sekmesi altında da sayfalar arasındaki Navigation ilişkileri sergilenir.

FlutterFlow Storyboard

Bu sitede hazırladığınız projeyi indirebilmek için üyelik planını yükseltmeniz gerekmektedir. Ücretli üyelik yapılmak istenmediği durumda bu sitenin sadece “Build” başlığından yararlanılabilir. Uygulamanın arayüzü ve widget hiyerarşisi bu sistede tasarlanabilir ve sonrasında kendi uygulamanızda kullanabilirsiniz.

FlutterViz ise daha kısıtlı fonksiyonellik sunmaktadır ama tasarladığınız projeyi ücretsiz bir şekilde indirebilirsiniz veya isterseniz sadece arayüzleri direk olarak projenizde kullanabilirsiniz.

Uygulama Arayüzünden Debug Yazısını Kaldırmak

Yeni bir uygulama oluşturulduğunda veya varolan uygulamanızda sağ üst köşede yer alan DEBUG yazısını kaldırmak için page’in arayüzünün MaterialApp widget’ının içine

void main() async {
  // redis connection
  // final redis_Connection = await RedisConnection().connect('localhost', 6379);

  runApp(
    MaterialApp(
      //debug yazısını kaldırmak için
      debugShowCheckedModeBanner: false,
      home: MyApp(), // app's root widget
    ),
  );
}

ve uygulamanın main fonksiyonunun içerisinde bulunan MaterialApp methodunun içerisine debugShowChechedModeBanner = false; satırı eklenir.

@override
Widget build(BuildContext context) {

  return MaterialApp(
    debugShowCheckedModeBanner: false,

    title: 'Flutter Android Studio',
    theme: ThemeData(

      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

Uygulama koşulurken ekran görüntüsü almak için terminalden flutter screenshot komutu koşulur, alınan ekran görüntüsü cwd(current working directory) yani projenin koştuğu dosya dizini altına default olarak flutter_01, flutter_02 şeklinde kaydedilir.