Flutter Week 2

Byadmin

Jan 17, 2021 #Flutter, #image, #layout, #widget layout

เอกสารประกอบการสอน 4123006 การพัฒนาโปรแกรมประยุกต์บนอุปกรณ์เคลื่อน Week 2

สร้าง app_week2_01 ขึ้นมา แก้ไขไฟล์ main.dart

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'sompoch22'),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('app_week2_01'),
      ),
      body: Center(

      ),
     
    );
  }
}

2. ให้ไปคลิกขวาที่ app_week2_01 แล้วเลือก new directory แล้วตั้งชื่อ images

3. เปิดไฟล์ pubspec.yaml แล้ว เปิดคอมเม้น assets หลังจากนั้นให้ กด pub get ด้านบน ดังภาพ

4. แก้ไขโค้ด main.dart เพื่อเอาไฟลรูปขึ้นในหน้าจอเรียงแบบ Row

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'sompoch22'),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('app_week2_01'),
      ),
      body: Container(
        child:Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Image.asset('images/car1.png'),
            Image.asset('images/car2.png'),
            Image.asset('images/car3.png'),
          ],
        )
      ),

    );
  }
}

วีดีโอประกอบการสอนตั้งแต่ข้อที่ 1.-4.

5. กำหนดขนาดของรูปภาพให้มีความกว้าง และความสูงตามต้องการ โดยสามารถกำหนดใน Image.assets แล้วระบุ width,height

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'sompoch22'),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('app_week2_01'),
      ),
      body: Container(
        child:Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Image.asset('images/car1.png',width: 100,height: 60,),
            Image.asset('images/car2.png',width:100,height: 60,),
            Image.asset('images/car3.png',width: 100,height: 60,),
          ],
        )
      ),

    );
  }
}

6. แก้ไขโค้ดในส่วนของ body (ให้แก้เฉพาะของ body ดูที่ tag ปิด Containner)

 body: Container(
        child:Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(Icons.thumb_up,size: 48,),
            Icon(Icons.watch,size: 48,color: Colors.red,),
            Icon(Icons.motorcycle,size: 48,),
            Icon(Icons.motorcycle,size: 48,),
            Icon(Icons.motorcycle,size: 48,),
          ],
        )
      ),

7. กรณีที่เราสร้างปุ่มแล้วปุ่มมีความกว้างไม่เท่ากัน ถ้าเราต้องการให้ปุ่มมีความกว้างเท่ากันสามารถใช้ InstrinsicWidth ได้

body: Center(
        child:IntrinsicWidth(
          child:Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
             RaisedButton(onPressed: (){},
             child:Text('สั้นๆ')),
             RaisedButton(onPressed: (){},
             child:Text('ยาวนิดๆ')),
             RaisedButton(onPressed: (){},
             child:Text('ยาวมากๆ ที่สุด'))
           ],
          ),
        ),
      ),

8. การสร้าง row ซ้อนเข้าไปในคอลัมน์สามารถทำได้โดยกำหนด child:Row แล้วสร้าง children ซ้อนเข้าไปดังโค้ด

 body: Center(
        child:IntrinsicWidth(
          child:Column(

           children: <Widget>[
             RaisedButton(onPressed: (){},
             child:Text('สั้นๆ')),
             RaisedButton(onPressed: (){},
             child:Text('ยาวนิดๆ')),
             RaisedButton(onPressed: (){},
             child:Text('ยาวมากๆ ที่สุด')),
            Row(
              children: <Widget>[
                   Icon(Icons.star),
                Icon(Icons.star),
                Icon(Icons.star),
                Icon(Icons.star),
                Icon(Icons.star),
               Text(' 170 Review'),
              ],
            )
           ],
          ),
        ),
      ),

9. การแสดงผลแบบ stack ทำให้สามารถกำหนด Layout ของ widget ได้

 body: Center(
        child:Stack(
          fit:StackFit.expand,
          children: <Widget>[
            Text('1',style: TextStyle(fontSize: 100),),
            Text('2',style: TextStyle(fontSize: 80,color: Colors.red),),
          Positioned(
            bottom:0,
            right:0,
            child: Text('3',style: TextStyle(fontSize: 60,color: Colors.blueAccent),),
          ),
            Positioned(
              top:50,
              left:200,
              child: Text('4',style: TextStyle(fontSize: 70,color: Colors.brown),),
            ),
          ],
        )
      ),

10. การใช้ Stack กำหนดรูปให้แสดงข้อความบนรูปได้ดังตัวอย่าง

  body: Center(
        child:Stack(
          children: <Widget>[
              Container(
                decoration: BoxDecoration(
                 image:DecorationImage(
                   image:NetworkImage('https://www.playulti.com/static/attachment/2019/4/11/attach-1557564995573.jpg'),
                   fit:BoxFit.cover,
                 ),
                ),
              ),
            Center(
              child:Column(
                mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Padding(padding: const EdgeInsets.only(bottom: 30),
                      child:Text('FINAL FANTASY 7 REMAKE',style: TextStyle(color:Colors.white,fontSize: 30),),
                    )

                  ],
              )
            ),
            ]
        )
      ),

11. การใช้ Expand เพื่อสร้าง Content แบบขยายตามอัตราส่วนหน้าจอ โดยกำหนดตาม flex โดยเปรียบเทียบการแสดงผลระหว่าง Container กับ Expanded ดังโค้ดด้านล่าง

 body: Center(
        child:Row(
          children: <Widget>[
            Container(
              width:100,
              color: Color(0xFF3be2a5),
            ),
            Expanded(
                child: Container(color:Colors.yellow),
                flex:2,
          ),
            Expanded(
                child: Container(color:Colors.blue),
                flex:1,
            )

          ]
        )
      ),

12. สามารถกำหนดให้ Container แสดงผลแบบหมุน Transform ได้ดังภาพ

 body: Center(

          child: Container(
            width:double.infinity,
            height: double.infinity,
            color:Colors.red,
            transform: Matrix4.rotationZ(pi/4),
            child: Text('Hello world',textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 20,
                  color: Colors.white),),
          ),

        )

10.การเอารูปไปใส่ในกรอบที่กำหนดให้สวยงาม โดยใช้ BoxDecoration มาช่วย

 body: Center(

          child: Container(
            width:300,
            height:300,
            decoration: BoxDecoration(
              color:Colors.cyan[300],
              borderRadius: BorderRadius.circular(16),
              image: DecorationImage(
               // image:NetworkImage('https://www.playulti.com/static/attachment/2019/4/11/attach-1557564995573.jpg'),
                image:AssetImage('images/car1.png'),
                fit:BoxFit.cover,
              )
              //border:Border.all(width:2,color: Colors.black),
            ),

          ),

        )

11. สามารถแสดงผลแบบวงกลมได้ แต่ต้องลบ border radius ออกด้วย

12. การใช้งาน Drawer การ slide widget ที่เป็น Container จากด้านข้าง

import 'dart:math';

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'sompoch22'),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final GlobalKey<ScaffoldState> _scaffoldKey=new GlobalKey<ScaffoldState>();
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        leading: IconButton(
          onPressed: (){
            _scaffoldKey.currentState.openDrawer();
          },
          icon:Icon(Icons.person),
        ),
        title: Text('app_week2_01'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.thumb_up), onPressed: (){
            print('print clicked');
          })
        ],
      ),
      drawer: Container(
        height:double.infinity,
        width:250,
        color:Colors.red,
        child:Text('Drawer Zone'),
      ),

      body: Center(

          child: Container(
            width:300,
            height:300,
            decoration: BoxDecoration(
              color:Colors.cyan[300],
              image: DecorationImage(
               // image:NetworkImage('https://www.playulti.com/static/attachment/2019/4/11/attach-1557564995573.jpg'),
                image:AssetImage('images/car1.png'),
                fit:BoxFit.cover,
              ),
                shape: BoxShape.circle,
              //border:Border.all(width:2,color: Colors.black),
            ),
          ),
        )


    );
  }
}

13. ตัวอย่างการสร้างปุ่มกด Button และ TextField รับค่า

 body: Center(
          child:Column(

            children: <Widget>[
              TextField(
                obscureText: true,
                decoration: InputDecoration(
                  border:OutlineInputBorder(),
                  labelText: 'password',
                ),
              ),
              RaisedButton(
                  onPressed: (){},
                  color:Colors.blue,
                  child:Text('Submit',style: TextStyle(color:Colors.white),)
              ),
            ],
          ),

        )