Flutter - Düzenlere Giriş

Temel kavramı bu yana Fluter olan şey olduğu eklendi , flutter aletler kendisi bir kullanıcı arayüzü düzeni işlevselliğini içerir. Flutter , yalnızca kullanıcı arayüzünü yerleştirmek amacıyla oldukça fazla sayıda Konteyner, Merkez, Hizalama vb. Gibi özel olarak tasarlanmış widget'lar sağlar. Diğer pencere öğelerini oluşturarak oluşturulan pencere öğeleri, normalde düzen pencere öğelerini kullanır. Bu bölümde Flutter düzen konseptini öğrenelim .

Düzen Widget'larının Türü

Düzen widget'ları, alt öğelerine göre iki farklı kategoriye ayrılabilir -

• Tek bir çocuğu destekleyen widget
• Birden çok çocuğu destekleyen widget

Gelecek bölümlerde hem widget türlerini hem de işlevselliğini öğrenelim.

Tek Çocuk Widget'ları

Bu kategoride, widget'ların alt öğesi olarak yalnızca bir widget'ı olacak ve her widget'ın özel bir düzen işlevi olacaktır.

Örneğin, Merkez widget'ı , alt widget'ı ana widget'ına göre ortalar ve Kapsayıcı widget'ı, dolgu, dekorasyon vb. Gibi farklı seçenekler kullanarak alt widget'ı içindeki herhangi bir yere yerleştirmek için tam esneklik sağlar.

Tek çocuk widget'lar, düğme, etiket vb. Gibi tek işlevlere sahip yüksek kaliteli widget oluşturmak için harika seçeneklerdir.

Kapsayıcı widget'ını kullanarak basit bir düğme oluşturma kodu aşağıdaki gibidir -

class MyButton extends StatelessWidget {
   MyButton({Key key}) : super(key: key); 

   @override 
   Widget build(BuildContext context) {
      return Container(
         decoration: const BoxDecoration(
            border: Border(
               top: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
               left: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
               right: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
               bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
            ),
         ),
         child: Container(
            padding: const
            EdgeInsets.symmetric(horizontal: 20.0, vertical: 2.0),
            decoration: const BoxDecoration(
               border: Border(
                  top: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),
                  left: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),
                  right: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)),
                  bottom: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)),
               ),
               color: Colors.grey,
            ),
            child: const Text(
               'OK',textAlign: TextAlign.center, style: TextStyle(color: Colors.black)
            ), 
         ), 
      ); 
   }
}

Burada iki widget kullandık - bir Kapsayıcı widget'ı ve bir Metin widget'ı. Widget'ın sonucu, aşağıda gösterildiği gibi özel bir düğmedir -

Flutter tarafından sağlanan en önemli tek çocuk düzen widget'larından bazılarını kontrol edelim -

• Padding- Alt widget'ını verilen dolguya göre düzenlemek için kullanılır. Burada, padding EdgeInsets sınıfı tarafından sağlanabilir .

• Align- alignment özelliğinin değerini kullanarak alt widget'ını kendi içinde hizalayın . Hizalama özelliği değeri, FractionalOffset sınıfı tarafından sağlanabilir . FractionalOffset sınıfı sol üstten bir mesafe açısından uzaklıklar belirtir.

Olası ofset değerlerinden bazıları aşağıdaki gibidir -

• FractionalOffset (1.0, 0.0) sağ üst köşeyi temsil eder.

• FractionalOffset (0.0, 1.0) sol alt kısmı temsil eder.

Kaydırmalarla ilgili örnek bir kod aşağıda gösterilmiştir -

Center(
   child: Container(
      height: 100.0, 
      width: 100.0, 
      color: Colors.yellow, child: Align(
         alignment: FractionalOffset(0.2, 0.6),
         child: Container( height: 40.0, width:
            40.0, color: Colors.red,
         ), 
      ), 
   ), 
)

• FittedBox - Alt parçacığı ölçeklendirir ve ardından onu belirtilen sığmaya göre konumlandırır.

• AspectRatio - Alt widget'ı belirtilen en boy oranına göre boyutlandırmaya çalışır

• ConstrainedBox

• Baseline

• FractinallySizedBox

• IntrinsicHeight

• IntrinsicWidth

• LiimitedBox

• OffStage

• OverflowBox

• SizedBox

• SizedOverflowBox

• Transform

• CustomSingleChildLayout

Merhaba dünya uygulamamız, ana sayfayı tasarlamak için malzeme tabanlı düzen widget'ları kullanıyor. Merhaba dünya uygulamamızı, aşağıda belirtildiği gibi temel düzen widget'larını kullanarak ana sayfayı oluşturacak şekilde değiştirelim -

• Container - Zengin stil özelliklerinin yanı sıra hizalama, dolgu, kenarlık ve kenar boşluğuna sahip genel, tek çocuk, kutu tabanlı konteyner widget'ı.

• Center - Alt widget'ını merkezleyen basit, Tek çocuk konteyner widget'ı.

MyHomePage ve MyApp widget'ının değiştirilmiş kodu aşağıdaki gibidir -

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return MyHomePage(title: "Hello World demo app");
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;
   @override
   Widget build(BuildContext context) {
      return Container(
         decoration: BoxDecoration(color: Colors.white,),
         padding: EdgeInsets.all(25), child: Center(
            child:Text(
               'Hello World', style: TextStyle(
                  color: Colors.black, letterSpacing: 0.5, fontSize: 20,
               ),
               textDirection: TextDirection.ltr,
            ),
         )
      );
   }
}

Buraya,

• Kapsayıcı pencere öğesi, en üst düzey veya kök pencere öğesidir. Kapsayıcı , içeriğini düzenlemek için dekorasyon ve dolgu özelliği kullanılarak yapılandırılır .

• BoxDecoration , Konteyner widget'ını dekore etmek için renk, kenarlık vb. Gibi birçok özelliğe sahiptir ve burada konteynerin rengini ayarlamak için renk kullanılır.

• dolgusu ait Container kullanılarak ayarlanır Widget dgeInsets dolgu değerini belirtmek için seçenek sunar sınıfı.

• Merkez , Kapsayıcı widget'ının alt widget'idir. Yine, Metin , Merkez widget'ının alt öğesidir. Metin mesajı göstermek için kullanılır ve Merkezi ebeveyn widget'ı, göre kısa mesajı ortalamak için kullanılır Konteyner .

Yukarıda verilen kodun nihai sonucu, aşağıda gösterildiği gibi bir düzen örneğidir -

Birden Çok Alt Pencere Öğesi

Bu kategoride, belirli bir widget birden fazla alt widget'a sahip olacaktır ve her widget'in düzeni benzersizdir.

Örneğin, Satır widget'ı alt öğelerinin yatay yönde yerleştirilmesine izin verirken, Sütun widget'ı alt öğelerinin dikey yönde yerleştirilmesine izin verir. Satır ve Sütun oluşturularak , herhangi bir karmaşıklık düzeyine sahip widget oluşturulabilir .

Bu bölümde sık kullanılan bazı widget'ları öğrenelim.

• Row - Çocuklarını yatay bir şekilde düzenlemesine izin verir.

• Column - Çocuklarının dikey olarak düzenlenmesine izin verir.

• ListView - Çocuklarını liste halinde düzenlemeye izin verir.

• GridView - Çocuklarını galeri olarak düzenlemeye izin verir.

• Expanded - Satır ve Sütun widget'ının alt öğelerinin mümkün olan maksimum alanı kaplamasını sağlamak için kullanılır.

• Table - Tablo tabanlı widget.

• Flow - Akış tabanlı widget.

• Stack - Yığın tabanlı widget.

Gelişmiş Düzen Uygulaması

Bu bölümde, hem tekli hem de çoklu alt düzen widget'larını kullanarak özel tasarımlı karmaşık bir ürün listeleme kullanıcı arayüzü oluşturmayı öğrenelim .

Bu amaçla, aşağıda verilen sırayı izleyin -

• Android Studio, product_layout_app'de yeni bir Flutter uygulaması oluşturun .

• Değiştir main.dart kodunu folowing ile kod -

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override 
   Widget build(BuildContext context) {
      return MaterialApp( 
         title: 'Flutter Demo', theme: ThemeData( 
         primarySwatch: Colors.blue,), 
         home: MyHomePage(title: 'Product layout demo home page'),
      ); 
   } 
} 
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
      
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),), 
         body: Center(child: Text( 'Hello World', )), 
      ); 
   }
}

• Here,

• MyHomePage widget'ını , varsayılan StatefulWidget yerine StatelessWidget'i genişleterek oluşturduk ve ardından ilgili kodu kaldırdık.

• Şimdi, aşağıda gösterildiği gibi belirtilen tasarıma göre ProductBox adlı yeni bir widget oluşturun -

• ProductBox'ın kodu aşağıdaki gibidir.

class ProductBox extends StatelessWidget {
   ProductBox({Key key, this.name, this.description, this.price, this.image}) 
      : super(key: key); 
   final String name; 
   final String description; 
   final int price; 
   final String image; 

   Widget build(BuildContext context) {
      return Container(
         padding: EdgeInsets.all(2), height: 120,  child: Card( 
            child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[
                  Image.asset("assets/appimages/" +image), Expanded(
                     child: Container(
                        padding: EdgeInsets.all(5), child: Column(
                           mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
                              children: <Widget>[ 
                              
                              Text(this.name, style: TextStyle(fontWeight: 
                                 FontWeight.bold)), Text(this.description), 
                              Text("Price: " + this.price.toString()), 
                           ], 
                        )
                     )
                  )
               ]
            )
         )
      );
   }
}

• Lütfen kodda aşağıdakilere dikkat edin -

• ProductBox , aşağıda belirtildiği gibi dört bağımsız değişken kullandı -

• isim - Ürün adı

• description - Ürün açıklaması

• fiyat - Ürünün fiyatı

• resim - Ürünün resmi

• ProductBox , aşağıda belirtildiği gibi yedi yerleşik widget kullanır -

• Container
• Expanded
• Row
• Column
• Card
• Text
• Image

• ProductBox , yukarıda belirtilen pencere öğesi kullanılarak tasarlanmıştır. Widget'ın düzeni veya hiyerarşisi aşağıda gösterilen şemada belirtilmiştir -

• Şimdi, uygulamanın varlıklar klasörüne ürün bilgileri için bir miktar sahte görüntü yerleştirin (aşağıya bakın) ve pubspec.yaml dosyasındaki varlıklar klasörünü aşağıda gösterildiği gibi yapılandırın -

assets: 
   - assets/appimages/floppy.png 
   - assets/appimages/iphone.png 
   - assets/appimages/laptop.png 
   - assets/appimages/pendrive.png 
   - assets/appimages/pixel.png 
   - assets/appimages/tablet.png

iPhone.png

Pixel.png

Laptop.png

Tablet.png

Pendrive.png

Floppy.png

Son olarak, MyHomePage widget'ındaki ProductBox widget'ını aşağıda belirtildiği gibi kullanın -

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title:Text("Product Listing")), 
         body: ListView(
            shrinkWrap: true, padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0), 
            children: <Widget> [
               ProductBox(
                  name: "iPhone", 
                  description: "iPhone is the stylist phone ever", 
                  price: 1000, 
                  image: "iphone.png"
               ), 
               ProductBox(
                  name: "Pixel", 
                  description: "Pixel is the most featureful phone ever", 
                  price: 800, 
                  image: "pixel.png"
               ), 
               ProductBox( 
                  name: "Laptop", 
                  description: "Laptop is most productive development tool", 
                  price: 2000, 
                  image: "laptop.png"
               ), 
               ProductBox( 
                  name: "Tablet", 
                  description: "Tablet is the most useful device ever for meeting", 
                  price: 1500, 
                  image: "tablet.png"
               ), 
               ProductBox(
                  name: "Pendrive", 
                  description: "Pendrive is useful storage medium", 
                  price: 100, 
                  image: "pendrive.png"
               ), 
               ProductBox(
                  name: "Floppy Drive", 
                  description: "Floppy drive is useful rescue storage medium", 
                  price: 20, 
                  image: "floppy.png"
               ), 
            ],
         )
      );
   }
}

• Burada, ProductBox'ı ListView widget'ının alt öğeleri olarak kullandık .

• Ürün düzeni uygulamasının (product_layout_app) tam kodu (main.dart) aşağıdaki gibidir -

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
   // This widget is the root of your application. 
   @override 
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Flutter Demo', theme: ThemeData(
            primarySwatch: Colors.blue,
         ), 
         home: MyHomePage(title: 'Product layout demo home page'), 
      );
   }
}
class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   
   @override 
   Widget build(BuildContext context) { 
      return Scaffold( 
         appBar: AppBar(title: Text("Product Listing")), 
         body: ListView(
            shrinkWrap: true, 
            padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0), 
            children: <Widget>[ 
               ProductBox(
                  name: "iPhone", 
                  description: "iPhone is the stylist phone ever", 
                  price: 1000, 
                  image: "iphone.png"
               ), 
               ProductBox( 
                  name: "Pixel",    
                  description: "Pixel is the most featureful phone ever", 
                  price: 800, 
                  image: "pixel.png"
               ), 
               ProductBox( 
                  name: "Laptop", 
                  description: "Laptop is most productive development tool", 
                  price: 2000, 
                  image: "laptop.png"
               ), 
               ProductBox( 
                  name: "Tablet", 
                  description: "Tablet is the most useful device ever for meeting", 
                  price: 1500, 
                  image: "tablet.png"
               ), 
               ProductBox( 
                  name: "Pendrive", 
                  description: "Pendrive is useful storage medium", 
                  price: 100, 
                  image: "pendrive.png"
               ), 
               ProductBox(
                  name: "Floppy Drive", 
                  description: "Floppy drive is useful rescue storage medium", 
                  price: 20, 
                  image: "floppy.png"
               ), 
            ],
         )
      );
   }
}
class ProductBox extends StatelessWidget {
   ProductBox({Key key, this.name, this.description, this.price, this.image}) :
      super(key: key); 
   final String name; 
   final String description; 
   final int price; 
   final String image; 
   
   Widget build(BuildContext context) {
      return Container(
         padding: EdgeInsets.all(2), 
         height: 120, 
         child: Card(
            child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
               children: <Widget>[ 
                  Image.asset("assets/appimages/" + image), 
                  Expanded( 
                     child: Container( 
                        padding: EdgeInsets.all(5), 
                        child: Column(    
                           mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
                           children: <Widget>[ 
                              Text(
                                 this.name, style: TextStyle(
                                    fontWeight: FontWeight.bold
                                 )
                              ),
                              Text(this.description), Text(
                                 "Price: " + this.price.toString()
                              ), 
                           ], 
                        )
                     )
                  )
               ]
            )
         )
      );
   }
}

Uygulamanın nihai çıktısı aşağıdaki gibidir -