Flutter Mobile Application

 



//ตัวอย่างพื้นฐานการแสดงข้อความ
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title : 'prasan',
      home : Scaffold(
        appBar : AppBar(title:Text('www.prasansoft.com')),
        body : Center(child : Text('www.prasansoft.com')) // ตัวอย่างการแสดงข้อความ

      )
    );
  }
}




//ตัวอย่างการใส่ Icon
import 'package:flutter/material.dart';

    void main() => runApp(MyApp()); //run class MyApp

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
  return MaterialApp(
    title : 'prasan',
    home : Scaffold(
      appBar : AppBar(title:Text('www.prasansoft.com')),
      body : Center(child : Icon(Icons.image,size:100.0)) //ตัวอย่างการใส่ Icon
    )
  );
 }
}


    
//ตัวอย่างการสร้างปุ่มแบบ RaisedButton    
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context){
     return MaterialApp(
       title : 'title',
       home : Scaffold(
         appBar : AppBar(title : Text('title text')),
         body : Center(
             child :  RaisedButton(
                 child: Text('สมัครสมาชิก',style: TextStyle(fontSize: 20)),
                 onPressed: () {}),   /// ปุ่มกด
         )
       )
     );
    }
  }

  

    
//ตัวอย่างการสร้างปุ่มแบบ FlatButton
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title : 'test',
      home : Scaffold(
        appBar : AppBar(title: Text('title on appbar')),
        body : Center(
              child : FlatButton(
                  child: Text('Flat Button',
                      style: TextStyle(fontSize: 20, color: Colors.blue)), // ปุ่มแบบ FlatButton
                  onPressed: () {}),
          )
      )
    );
  }
}




  




    
//ตัวอย่างการวางซ้อนกันของวัตถุแบบ Stack
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
        title : 'prasan',
        home :  Scaffold(
          appBar: AppBar(
              title: Text('Stack Demo')),
          body: Stack(
              children: [
                Container(
                width: 200,
                height: 200,
                color: Colors.pink,
                ),
                Container(
                width: 100,
                height: 100,
                color: Colors.red,
                ),
                Container(
                width: 50,
                height: 50,
                color: Colors.green,
                ),
           ],
         ),
       )
    );
  }
}



//ตัวอย่างการใส่ ROW จัดวางแบบแถว
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
        home : Scaffold(
          appBar: AppBar(title: Text('Row Demo')),
          body: Center(
              child: Row(
                  children: [
                  Expanded(
                    child: Container(
                      color: Colors.blue[50],
                      child: Text('Item1', textAlign: TextAlign.center),
                  )),
                  Expanded(
                    child: Container(
                      color: Colors.red[50],
                      child: Text('Item2', textAlign: TextAlign.center),
                  )),
                  Expanded(
                    child: Container(
                      color: Colors.green[50],
                      child: Text('Item3', textAlign: TextAlign.center),),
             ),
         ],
      )),
    ));
  }
}






//ตัวอย่างการใส่ Column จัดวางแบบคอลัม
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
        home :  Scaffold(
              appBar: AppBar(title: Text('Column Demo')),
              body: Center(
                  child: Column(
                        children: [
                                  Expanded(
                                      child: Container(
                                          color: Colors.blue[50],
                                          child: Text('Item1', textAlign: TextAlign.center),
                                        )),
                                  Expanded(
                                      child: Container(
                                          color: Colors.red[50],
                                          child: Text('Item2', textAlign: TextAlign.center),
                                          )),
                                  Expanded(
                                      child: Container(
                                        color: Colors.red[50],
                                        child: Text('Item3', textAlign: TextAlign.center),
                                      )),
                                ],
                              )
                          )
                      )
                  );
  }
}




//ตัวอย่างการใส่ CheckBox
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  bool monVal = false;
  bool tuVal = false;
  bool wedVal = false;
  bool thurVal = false;
  bool friVal = false;
  bool satVal = false;
  bool sunVal = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text("Checkbox Demo")),
          body: SingleChildScrollView(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      checkbox("Monday", monVal),
                      checkbox("Tuesday", tuVal),
                      checkbox("Wednesday", wedVal),
                      checkbox("Thursday", thurVal),
                      checkbox("Friday", friVal),
                      checkbox("Saturday", satVal),
                      checkbox("Sunday", sunVal),
                    ],
                  ),
                ],
              ),
            ),
          )),
    );
  }

  Widget checkbox(String title, bool boolValue) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(title, style: TextStyle(fontWeight: FontWeight.bold)),
        Checkbox(
          value: boolValue,
          onChanged: (bool value) {
            setState(() {
              switch (title) {
                case "Monday":
                  monVal = value;
                  break;
                case "Tuesday":
                  tuVal = value;
                  break;
                case "Wednesday":
                  wedVal = value;
                  break;
                case "Thursday":
                  thurVal = value;
                  break;
                case "Friday":
                  friVal = value;
                  break;
                case "Saturday":
                  satVal = value;
                  break;
                case "Sunday":
                  sunVal = value;
                  break;
              }
            });
          },
        )
      ],
    );
  }
}





//ตัวอย่างการใส่ ListBox
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  var dropdownValue = "One";
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
        title: Text("Dropdown Button"),
    ),
            body: Center(
                  child: DropdownButton(
                        value: dropdownValue,
                        icon: Icon(Icons.arrow_downward),
                        iconSize: 24,
                        elevation: 16,
                        style: TextStyle(color: Colors.deepPurple, fontSize: 12),
                        underline: Container(
                                height: 2,
                                color: Colors.deepPurpleAccent,
                         ),
                onChanged: (String newValue) {
                          setState(() {
                             dropdownValue = newValue;
                 });
                },
    items: ['One', 'Two', 'Three', 'Four']
        .map>((String value) {
    return DropdownMenuItem(
                   value: value,
                    child: Text(value),
          );
        }).toList(),
      )),)
    );
  }
}





//ตัวอย่างการใส่ PopupMenu
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Popup Menu Demo"),
          ),
          body: Center(
              child: PopupMenuButton(
                itemBuilder: (context) => [
                  PopupMenuItem(
                    value: 1,
                    child: Text("First"),
                  ),
                  PopupMenuItem(
                    value: 2,
                    child: Text("Second"),
                  ),
                  PopupMenuItem(
                    value: 3,
                    child: Text("Third"),
                  ),
                ],
                initialValue: 1,
                onCanceled: () {
                  showSnackBar(context, 'You have canceled the menu.');
                },
                onSelected: (value) {
                  showSnackBar(context, 'You have selected the value.');
                },
                icon: Icon(Icons.list),
              ))),
    );
  }

  void showSnackBar(BuildContext context, String message) {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text(message),
      duration: Duration(milliseconds: 1000),
    ));
  }
}




//ตัวอย่างการใส่ Container
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
        title: Text('Container Demo'),
    ),
        body: Center(
             child: Container(
                  margin: const EdgeInsets.all(10.0),
                  color: Colors.amber[600],
                  width: 80.0,
                  height: 80.0,
                ),
            ),
          )
    );
  }
}



//ตัวอย่างการใส่ MaterialApp
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: const Text('MaterialApp Demo'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Text('ตัวอย่างการใช้งาน Material App เพื่อแสดงข้อความบริเวณ Body ของอุปกรณ์ Mobile Device'
                'ตัวอย่างการใช้งาน Material App เพื่อแสดงข้อความบริเวณ Body ของอุปกรณ์ Mobile Device'
                'ตัวอย่างการใช้งาน Material App เพื่อแสดงข้อความบริเวณ Body ของอุปกรณ์ Mobile Device'
                'ตัวอย่างการใช้งาน Material App เพื่อแสดงข้อความบริเวณ Body ของอุปกรณ์ Mobile Device'
                'ตัวอย่างการใช้งาน Material App เพื่อแสดงข้อความบริเวณ Body ของอุปกรณ์ Mobile Device'
                'ตัวอย่างการใช้งาน Material App เพื่อแสดงข้อความบริเวณ Body ของอุปกรณ์ Mobile Device'),
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}




//ตัวอย่างการใส่เมนูด้านข้าง
import 'package:flutter/material.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:  Scaffold(
        appBar: AppBar(
        title: Text('Drawer Demo'),
    ),
        drawer: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
                children: [
                        DrawerHeader(
                            decoration: BoxDecoration(
                            color: Colors.blue,
                            ),
                            child: Text(
                            'Drawer Header',
                            style: TextStyle(
                            color: Colors.white,
                            fontSize: 24,
                            ),
                          ),
                       ),
                    ListTile(
                          leading: Icon(Icons.message),
                          title: Text('Messages'),
                          onTap: () {
                          Navigator.pop(context);
                          },
                        ),
                    ListTile(
                           leading: Icon(Icons.account_circle),
                           title: Text('Profile'),
                           onTap: () {
                           Navigator.pop(context);
                          },
                       ),
                    ListTile(
                          leading: Icon(Icons.settings),
                          title: Text('Settings'),
                          onTap: () {
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    ),
        ),
      )
    );
  }
}




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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  TextEditingController nameController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Login'),
          ),
          body: Padding(
              padding: EdgeInsets.all(10),
              child: ListView(
                children: [
                  Container(
                      alignment: Alignment.center,
                      padding: EdgeInsets.all(10),
                      child: Text(
                        'Prasansoft.com',
                        style: TextStyle(
                            color: Colors.blue,
                            fontWeight: FontWeight.w500,
                            fontSize: 30),
                      )),
                  Container(
                    padding: EdgeInsets.all(10),
                    child: TextField(
                      controller: nameController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'User Name',
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
                    child: TextField(
                      obscureText: true,
                      controller: passwordController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Password',
                      ),
                    ),
                  ),
                  FlatButton(
                    onPressed: () {
                      //forgot password screen
                    },
                    textColor: Colors.blue,
                    child: Text('Forgot Password'),
                  ),
                  Container(
                      height: 50,
                      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                      child: RaisedButton(
                        textColor: Colors.white,
                        color: Colors.blue,
                        child: Text('เข้าสู่ระบบ'),
                        onPressed: () {
                          print(nameController.text);
                          print(passwordController.text);
                        },
                      )),
                  Container(
                      child: Row(
                        children: [
                          Text('Does not have account?'),
                          FlatButton(
                            textColor: Colors.blue,
                            child: Text(
                              'Sign in',
                              style: TextStyle(fontSize: 20),
                            ),
                            onPressed: () {
                              //signup screen
                            },
                          )
                        ],
                        mainAxisAlignment: MainAxisAlignment.center,
                      ))
                ],
              ))),
    );
  }
}





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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  var _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List _widgetOptions = [
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('BottomNavigationBar'),
        ),
        body: Center(
          child: _widgetOptions.elementAt(_selectedIndex),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Menu1'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Text('Menu2'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              title: Text('Menu3'),
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: onItemTapped,
        ),
      ),
    );
  }

  void onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}