จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #1

มาต่อกับชาเลนจ์ฝึกเขียน Flutter ช่วง WFH กันเลยครับ บทความนี้ผมเขียนเรื่อง Widget ที่ผมได้ลองเล่นมานะครับ

บทความต่อจาก

จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #0

Contents

• Container widget
• Row & Column widget

Container widget

ให้มองว่ามันเป็นกรอบไว้จัดการให้อยู่ตำแหน่งต่างๆ เช่น กลางจอ ขวาบน ขวาล่าง หรือไว้ครอบ Text เพื่อจัด margin หรือ padding เป็นต้น

https://gist.github.com/PhatipanSuwanich/d5a58d16d011ece84b733086adc000dd

color

color: Colors.brown // สาเหตุที่สีไปทั้งเพราะผมไม่ได้กำหนดขนาดให้ Container 

child

color: Colors.brown
child: Text("Container")

เมื่อเพิ่ม text เข้าไปแล้ว Container ก็จะมีขนาดเท่า text

alignment

ผู้อ่านสามารถกำหนดเป็นแกน X,Y หรือเลือกตามที่เขากำหนดมาให้แล้วก็ได้

alignment: FractionalOffset.topCenter
// alignment: FractionalOffset(0, 0)

padding

Padding คือการเลื่อนภายในวัตถุ เราสามารถเลือกได้ว่าจะเลื่อนแค่ Top หรือ 4 ด้านเลยก็ได้นะครับ

Link

padding: EdgeInsets.only(top: 10),
// padding: EdgeInsets.all(10),

margin

คือการเลื่อนตำแหน่งภายนอก Container

margin: EdgeInsets.only(top: 20),
// margin: EdgeInsets.all(20),

constraints

คำสั่ง expand จะเป็นการขยายจนสุดเท่ากับว่าเรากำหนดขนาด Container ได้

constraints: BoxConstraints.expand(width: 150, height: 150)

decoration

เป็นการกำหนดค่าภายใน container โดย
border คือ ขนาดเส้น
borderRadius คือ ขอบมน
gradient คือ การไล่สี

decoration: BoxDecoration(
  border: Border.all(
      width: 2, color: Colors.black, style: BorderStyle.solid),
  borderRadius: BorderRadius.circular(20),
  gradient: LinearGradient(colors: Colors.accents),
)

Row & Column widget

ตามชื่อเลยครับเป็นการจัด content ให้เป็นอยู่ในแนวนอนหรือแนวตั้ง

https://gist.github.com/PhatipanSuwanich/40c30e683b30957970ebe196aa65857e

children

ภายใต้ Row หรือ Column ก็จะต้องมี children เป็น array เพื่อเก็บ content

children: <Widget>[
  Text("Mr."),
  Text("Patiphan"),
  Text("Suwanich")
]

mainAxisSize

เป็นการกำหนดพื้นที่ว่าเราต้องการ มากที่สุดหรือน้อยที่สุด

MainAxisSize.max
MainAxisSize.min

mainAxisAlignment

เป็นตัวกำหนดว่า content ภายใต้ children จะอยู่ตรงไหน
MainAxisAlignment.start ถ้าเราไม่ได้ประกาศ start จะเป็นค่าเริ่มต้น
MainAxisAlignment.center คือ ตรงกลาง
MainAxisAlignment.end คือ ท้ายสุด

// space evenly between the children.
mainAxisAlignment: MainAxisAlignment.spaceBetween

// space before and after the first and last child.
mainAxisAlignment: MainAxisAlignment.spaceEvenly

// space half of that space before and after the first and last 
// child.
mainAxisAlignment: MainAxisAlignment.spaceAround

crossAxisAlignment

เป็นตัวกำหนดว่า content ภายใต้ children โดย
CrossAxisAlignment.start เป็นค่าเริ่มต้นคือจะชิบขอบบนสุด
CrossAxisAlignment.end คือจะชิบขอบล่างสุด

children: <Widget>[
  Text("Mr.",style: TextStyle(fontSize: 50),),
  Text("Patiphan"),
  Text("Suwanich")
]
crossAxisAlignment: CrossAxisAlignment.center

crossAxisAlignment: CrossAxisAlignment.end

crossAxisAlignment: CrossAxisAlignment.baseline, // ทำให้ฐานเท่ากัน
textBaseline: TextBaseline.alphabetic // ต้องการให้ baseline เป็นแบบไหน

TextBaseline

ความแตกต่างระหว่าง alphabetic and ideographic

TextBaseline.alphabetic

TextBaseline.ideographic

ขอบคุณภาพจาก Suragch

textDirection

จะทำให้เริ่มปริ้นจาก “ขวามาซ้าย” ปกติจะเป็น “ซ้ายมาขวา”

textDirection: TextDirection.rtl,

ส่วน Column ก็เหมือนๆ Row เลยครับไปลองเล่นกันดูครับ

วันนี้ขอจบบทความเท่านี้นะครับ ถ้ามีอะไรติชมเขียนมาได้เลยนะครับ ผมจะได้เอาไปปรับปรุงในบทความต่อไป ขอบคุณที่อ่านจนจบครับ

• จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #2