Flutter Layout Cheat Sheet

Flutter Cheat Sheet Pdf
Flutter Main Axis Alignment
Flutter Flexbox
Flutter Layout Cheat Sheet

I think the information is too rough to give the advice. Though Card Widget is easy to use but lots of properties are not able to change (like border, shadow of the card). I suggest you can study the Card widget first and define a custom card widget if it is not fit your layout. For custom widget, I think container/row/column can do most of the. The Dart language is designed to be easy to learn for coders coming from other languages, but it has a few unique features. This codelab — which is based on a Dart language cheatsheet written by and for Google engineers — walks you through the most important of these language features.

A table allows the user to arrange the data in rows and columns. It is used to store and display our data in a structured format, which helps us to compare the pairs of related values easily.

Flutter also allows the user to create a table layout in the mobile application. We can create a table in Flutter using the Table widget that uses the table layout algorithm for its children. This widget has several properties to enhance or modify the table layout. Osx install gcc. These properties are: border, children, columnWidths, textDirection, textBaseline, etc.

When we use the Table widget?

A table widget can be used when we want to store multiple rows with the same column width, and each column(table) contains equal data. Flutter provides another approach for the same using the GridView widget.

To create a table, we must use the following things:

First, we need to add a Table widget in the body.
Next, we have to add TableRow(s) in children of the table widget. Since the table widget has multiple rows, so we use children, not child.
Finally, we need to add TableCell(s) in children of TableRow widget. Now, we can write any widget in this place like we are going to use a Text widget.

Flutter Cheat Sheet Pdf

While using this widget, we must know these rules:

This widget automatically decided the column width, which is equally divided between TableCells. If it is not equal, we will get an error that says every TableRow in a table must have the same number of children so that every cell is filled. Otherwise, the table will contain holes.
Each row has the same height, which will be equal to the highest height of a TableCell.
The children of a table can have only TableRow widgets.

Let us understand it with the help of an example given below where we try to cover each thing related with this widget:

import 'package:flutter/material.dart'; void main() {runApp(MyApp());} class MyApp extends StatefulWidget { @override _TableExample createState() => _TableExample(); } class _TableExample extends State<MyApp> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Table Example'), ), body: Center( child: Column(children: <Widget>[ Container( margin: EdgeInsets.all(20), child: Table( defaultColumnWidth: FixedColumnWidth(120.0), border: TableBorder.all( color: Colors.black, style: BorderStyle.solid, width: 2), children: [ TableRow( children: [ Column(children:[Text('Website', style: TextStyle(fontSize: 20.0))]), Column(children:[Text('Tutorial', style: TextStyle(fontSize: 20.0))]), Column(children:[Text('Review', style: TextStyle(fontSize: 20.0))]), ]), TableRow( children: [ Column(children:[Text('Javatpoint')]), Column(children:[Text('Flutter')]), Column(children:[Text('5*')]), ]), TableRow( children: [ Column(children:[Text('Javatpoint')]), Column(children:[Text('MySQL')]), Column(children:[Text('5*')]), ]), TableRow( children: [ Column(children:[Text('Javatpoint')]), Column(children:[Text('ReactJS')]), Column(children:[Text('5*')]), ]), ], ), ), ]) )), ); } }

Output:

When we run the application in emulator or device, we will see the screenshot below:

Flutter DataTable

Flutter also allows us another widget to create a table in our application named DataTable widget. It is a material design data table where we can display data with column labels and rows. This widget automatically adjusted the table's column according to the cell data. It is expensive to display data using this widget because here, all the data must be measured twice. First, it measured the dimensions for each column, and second, it actually lay out the table. So, we have to ensure that this widget can only be used when we have fewer rows.

DataTable widget stored information using columns and rows property. The columns property contains data using an array of DataColumn, and the rows property contains information using an array of DataRow. The DataRow has sub-property cells that take an array of DataCell. The DataColumn has a sub-property label that takes widgets as value. We can also provide Text, Image, Icon, or any other widget in the DataTable.

The following is the syntax of DataTable:

Example

Let us understand how to use DataTable in the Flutter app. Here, we will define a simple data table that has three column labels and four rows:

import 'package:flutter/material.dart'; void main() {runApp(MyApp());} class MyApp extends StatefulWidget { @override _DataTableExample createState() => _DataTableExample(); } class _DataTableExample extends State<MyApp> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter DataTable Example'), ), body: ListView(children: <Widget>[ Center( child: Text( 'People-Chart', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold), )), DataTable( columns: [ DataColumn(label: Text( 'ID', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold) )), DataColumn(label: Text( 'Name', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold) )), DataColumn(label: Text( 'Profession', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold) )), ], rows: [ DataRow(cells: [ DataCell(Text('1')), DataCell(Text('Stephen')), DataCell(Text('Actor')), ]), DataRow(cells: [ DataCell(Text('5')), DataCell(Text('John')), DataCell(Text('Student')), ]), DataRow(cells: [ DataCell(Text('10')), DataCell(Text('Harry')), DataCell(Text('Leader')), ]), DataRow(cells: [ DataCell(Text('15')), DataCell(Text('Peter')), DataCell(Text('Scientist')), ]), ], ), ]) ), ); } }

Output:

When we run the application in emulator or device, we will see the screenshot below:

flutter เท่าที่รู้ คือชุดบทความที่ผมเรียบเรียงจากการใช้งาน

บทความชุดนี้ เป็นบทความที่ผู้เขียนเรียบเรียงจากการหัดเขียน flutter ของผู้เขียน ตั้งแต่เริ่มต้นการใช้งาน widgets พื้นฐาน ไปจนถึง state managements

Note

บทความชุดนี้เหมาะสำหรับผู้ที่เขียน flutter มาบ้างแล้ว จะไม่ลงไปถึงขั้นตอนการติดตั้งต่างๆ ซึ่งแต่ละบทความจะแปะ code ไว้ให้ท้ายบทความ เนื่องจากเขียนจากสไตล์การใช้งานของผู้เขียนเอง หากเจอข้อผิดพลาดส่วนไหน กรุณาช่วยแนะนำด้วยนะครับ ป่ะเริ่มเรียนรู้ไปด้วยกันเลย !

ชุดบทความนี้ แบ่งออกเป็น 5 บทความ

Basic Widgets : แนะนำให้รู้จักกับ wedgets พืนฐานที่ใช้กันบ่อยๆ
Build Simple UI : โดยนำพวก wedgets จากบทความแรกมายำรวมกันเป็นหน้า login
Provider Architecture : เริ่มเข้าสู่ การวางโครงสร้างของ application การจัดการข้อมูลภายใน application
Provider + Firebase(auth + firstore) : นำ provider มาประยุกต์ฝช้งานร่วมกับ firebase
Provider + http : สร้าง app ที่เชื่อมต่อกับ REST API

มาเริ่มกันเลย

ผมแบ่ง wedgets ไว้ 3 หมวดโดยแบ่งจามลักษณะของการใช้งาน ได้แก่

Flutter Main Axis Alignment

ประเภทจัดการ layout
- Row
- Column
- Stack
ประเภทที่ห่อหุ้ม layout
- Container
- Wrap
- Expanded
- Center
- GestureDetector
ประเภทใช้งานทั่วไป
- Text
- RichText
- Image
- TextField
- Button

ซึ่งใน wedgets แต่ละตัวนั้นมี คุณสมบัติที่หลากหลายมากซึ่งบางตัว สามารถนำไปเขียนเป็นอีกหนึ่งบทความได้เลย แต่ในบทความนี้ ผู้เขียนจะอธิบายเฉพาะที่ผู้เขียนได้ใช้งานบ่อย และจะแปะข้อมูลเพื่อให้ ผู้อ่านสามารถไปศึกษาเพิ่มเติมได้ มาเริ่มตัวแรกกันเลย

1 Row & Column

row : เป็นการจัดเรียงวัตถุแบบแนวนอน
column : เป็นการจัดเรียงวัตถุแบบแนวตั้ง

mainAxisAlignment

เป็นคำสั่งที่เอาไว้จัดการ layout ในแนวแกนหลัก

start

center

end

spaceBetween

spaceEvenly

spaceAround

crossAxisAlignment

เป็นคำสั่งที่เอาไว้จัดการ layout ในแนวแกนรอง

start

center

end

baseline

stretch

Stsck

2 ประเภทที่ห่อหุ้ม layout

Container

Wrap

Expanded

Center

เป็น widget ที่เอาไว้ครอบ วัตถุ เพื่อให้วัตุนั้นอยู่กึ่งกลางของ widgets นั้น

GestureDetector

เป็น widget ที่เมื่อเอาไปครอบ widget ตัวไหนสามารถทำให้ wedget นั้นกดได้ เหมือน button โดยจะใช้คำสั่ง onTap() ในการเรียก callback function

Orientation

เป็นท่าที่เอาไว้เช็คว่า ตอนนี้อยู่ในหน้าจอแนวตั้งหรือแนวนอน เราสามารถตั้งเงื่อนไขได้ว่า จะให้แสดง wedgets แบบไหน

3 ประเภทใช้งานทั่วไป

Flutter Flexbox

Text

Text wedget ตามตัวเลยเอาไว้แสดง Text เราสามารถ print variable ใน text ได้โดยใช้ $variable และยังสามารถกำหนด style (สี, ขนาด, รูปแบบตัวอักษรได้)

Flutter Layout Cheat Sheet

RichText

Image

Image assets

คือ การใช้ images ที่อยู่ใน assets วิธีการเพิ่มคือ

สร้าง folder assets » images ใว้ในระดับ root project
เข้าไปเพิ่ม assets ใน pubspec.yaml

Image network

TextField

เนื่องจากเรื่อง from มีรายละเอียดข้อนข้างมากจึงขอเก็บเอาไว้เขียนในบทความต่อไป แต่หากใครสงสัยอยากลองหาอ่านเพิ่มเติมแนะนำ บทความนี้

Button

RaisedButton

Material Buttons

ในส่วนของ button นั้นสามารถศึกษาเพิ่มเติมได้จาก ที่นี่

สรุป

ในบทความนี้พาไปดู wedgets พื้นฐายที่มักใช้งานบ่อยๆRef.

layout sheets https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
box decoration https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20
basic layout https://flutter.dev/docs/development/ui/widgets/basics
textformfield https://medium.com/flutter-community/a-deep-dive-into-flutter-textfields-f0e676aaab7a
widgets https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041