Flutter Layout ve UI Widget'lar

Stack widget

Stack widget widget'lar st ste yerletirmek (veya ymak) iin kullanlr.

Yukardaki resimde Gne, bulutlar ve ierik, birbirinin zerine ylm farkl widget'lardr. Bir stack'in tm ocuklar ya konumlanmtr ya da (varsaylan olarak) konumlanmamtr.

Stack widget alt widget'larn sol st kelerine gre hizalar ve bunlar birbiri ardna yan yana yerletirir. Alignment zellii ile bir stack'e hangi yne hizalanacan syleyebilirsiniz. rnein, hizalamay horizontal (yatay olarak) ayarlarsanz, stack bir row gibi davranacaktr. Bir ocuk aka konumlandrlmad srece stack bir column gibi alr ve ocuklar dikey olarak yerletirir.

Bir widget' konumlandrmak iin onu Positioned widget'na sararsnz.
positioned widget u zelliklere sahiptir: top, left, right, bottom, width, and height. Bunlarn hibirini ayarlamanz gerekmez, ancak en fazla iki horizontal properties (yatay zellik) (left, right, and width) ve iki vertical properties (dikey zellik) (top, bottom, and height) ayarlayabilirsiniz. Bu zellikler, Flutter'a widget'n nereye boyanacan syler. ocuklar, RenderStack algoritmas tarafndan boyanr:

Konumlandrlmam tm ocuklar bir row veya column'un yapaca ekilde dzenler. Bu, stack'e son boyutunu syler. Konumlandrlmam ocuk yoksa stack mmkn olduunca byk olmaya alr.

top, left vb zelliklerini kullanarak konumlandrlm tm alt elerini (children) stack'in render box'na gre dzenler. Konumlandrlm zellikler(positioned properties), Flutter'a stack'in alt elerini paralel kenarna gre nereye yerletireceini syler.
rnein, top: 10.0, positioned widget' stack box'nn st kenarndan 10.0 piksel ie yerletirir.

Stack Widget'lar birbirinin zerine veya ak bir ekilde birbiriyle ilikili olarak yerletirmek istiyorsanz, kullanabileceiniz bir widget'tr.

Table widget

Adndan da anlalaca zere tablo oluturmak iin kullanlr.

Table grdmz dier layout widget'larndan daha katdr, nk tablolarn (teoride) tek bir amac vardr: verileri okunabilir bir ekilde grntlemek. Tablolar, widget elerini stunlar ve satrlar halinde sralar ve tablodaki her hcre, satrdaki dier tm hcrelerle ayn ykseklie ve stunundaki her pencere esiyle ayn genilie sahiptir. Flutter tablolar nceden belirgin column width'leri gerektirir ve hibir tablo hcresi bo olamaz. Bu kurallar gz nne alndnda, dier multi-child widget'lara benzer ekilde kodda bir tablo uygularz.

Table(  columnWidths: Map<int, TableColumnWidth>{},  border: Border(),   defaultColumnWidth: TableColumnWidth(),  defaultVerticalAlignment:    TableCellVerticalAlignment(),  children: List<TableRow>[]);

Table widget ile alrken dikkat etmeniz gerekenler:

columnWidths kullanmak zorunda deilsiniz ama defaultColumnWidth parametresi null olamaz.

defaultColumnWidth default bir argumana sahiptir.

FlexColumnWidth(1.0), yani hibir ey iletmeniz gerekmez. Ama null olamaz.
defaulColumnWidth: null bir hata verir. Ancak defaultColumnWidth'in varsaylan bir bamsz deikeni olduundan, her stunun ayn boyutta olmasn ve tablonun mmkn olduunca fazla genilikte olmasn istiyorsanz bunu yok sayabilirsiniz.

Column width'lerini, bir map'i columnWidths'e ileterek tanmlarsnz. Map, key olarak column'un index deerini(0'dan balayarak) ve column'un ne kadar yer kaplamasn istediiniz deeri alr.

Border istee baldr.

TableCellVerticalAlignment, yalnzca row'larnzn children'lar TableCells ise alr.

Aadaki kod, baz satrlarn boyutlarn tanmlar. 1. stunun genilii iin bir tanm olmadna dikkat edin!

Table(  columnWidths: {    0: FixedColumnWidth(100.0),    2: FixedColumnWidth(20.0),    3: FixedColumnWidth(20.0),  },  defaultVerticalAlignment:        TableCellVerticalAlignment.middle,  children: <TableRow>[...],);

TableRow : Bir table row, normal bir row'dan daha basittir. ki nemli yaplandrmas vardr:

Bir tablodaki her row'un eit sayda ocuu olmaldr.

ocuklarn alt widget aalarnda TableCell'i kullanabilirsiniz, ancak kullanmak zorunda deilsiniz. TableCell, widget aacnda onun zerinde bir yerde, ancestor bir TableRow'a sahip olduu srece, TableRow'un dorudan bir ocuu olmak zorunda deildir.

Dart'n List.generate() constructor'ndan widget'lar oluturma

Tablonun child zelliine bir liste iletmek yerine, widget'lar dndren fonksiyonlar, constructor'lar ve class'lar kullanabiliriz.

Table(  columnWidths: {    0: FixedColumnWidth(100.0),    2: FixedColumnWidth(20.0),    3: FixedColumnWidth(20.0),  },  defaultVerticalAlignment: TableCellVerticalAlignment.middle,  children: List.generate(7, (int index) {    ForecastDay day = forecast.days[index];    Weather dailyWeather =            forecast.days[index].hourlyWeather[0];    final weatherIcon =            _getWeatherIcon(dailyWeather);    return TableRow(      children: [        // ....      ],    ); // TableRow  });); // Table

Bu List.generate constructor fonksiyonu, derleme zamannda yrtlr. List.generate'i bir dng olarak dnebilirsiniz. levsel olarak yle bir ey yazmakla ayndr:

List<Widget> myList = [];for (int i = 0; i < 7; i++) {    myList.add(TableRow(...));}

Tpk for dngs gibi, rnek koddaki List.generate constructor' , verdiiniz kodu yedi kez altracaktr. (Yine de her dng yinelemesindeki index'in aslnda 0-6 arasnda olacan unutmamak nemlidir.)

List.generate bir Dart zelliidir ve Flutter'a zg deildir. Yine de bir row, column, table, veya list iin birka widget oluturmanz gerektiinde Flutter'da olduka kullanldr.

List.generate'i kullanmasaydk, una benzeyen daha ayrntl bir kod yazmamz gerekirdi:

Table (  children: [    TableRow(       children: [         TableCell(),         TableCell(),         TableCell(),         TableCell(),       ]    ),    TableRow(      children: [        TableCell(),        TableCell(),        TableCell(),        TableCell(),      ]    ),    //... etc., 5 more times  ])

TableCell, Text, Icon ve Padding'in tm kullanlr.

children: List.generate(7, (int index) {  ForecastDay day = forecast.days[index];  Weather dailyWeather = forecast.days[index].hourlyWeather[0];  final weatherIcon = _getWeatherIcon(dailyWeather);  return TableRow(    children: [      TableCell(        child: const Padding(          padding: const EdgeInsets.all(4.0),          child: ColorTransitionText(            text: DateUtils.weekdays[dailyWeather.dateTime.weekday],            style: textStyle,            animation: textColorTween.animate(controller),          ),        ),      ),      TableCell(        child: ColorTransitionIcon(          icon: weatherIcon,          animation: textColorTween.animate(controller),          size: 16.0,        ),      ),      TableCell(        child: ColorTransitionText(          text: _temperature(day.max).toString(),          style: textStyle,          animation: textColorTween.animate(controller),        ),      ),      TableCell(        child: ColorTransitionText(          text: _temperature(day.min).toString(),          style: textStyle,          animation: textColorTween.animate(controller),        ),      ),    ],  );}),// ...

VerticalDirection.up Stunun default akn tersine evirmek iin kullanlr.

TabBar widget

Sekmeler(Tabs), mobil uygulamalarda yaygn olarak kullanlan bir UI esidir. Flutter Material library, sekmelerle almay olduka kolaylatran yerleik sekme widget'lar salar.

Devam sonra...

Resource: Flutter in Action chapter 4