- เอกสารประกอบการสอน flutter Programming Mobile App Develop with Flutter 1 Day
- download android studio Download Android Studio & App Tools – Android Developers
- download flutter Install Flutter manually
- Install android studio กด next install
- check SDK Manager หน้าแรกเลือก project -> เลือก More Action->SDK Manager
ดู SDK Tools ติกตามภาพแล้วกด apply ไป
กด apply แล้วกด OK ไป - กลับมาหน้าแรกตรง project -> เลือก More Action->Virtual Device Manager
กด Create Virtual Device -> เลือก Pixel 10 Pro XL ->
รอ - ไปลง flutter
แตกไฟล์ที่โหลดมา กดหนด C:\flutter

- เข้าไปที่ C:\flutter\flutter\bin copy path

copy—-> C:\flutter\flutter\bin - คลิกขวาที่ this pc เลือก properties เลือก advance system setting
tab advance เลือก enveralment….

กด new แล้ววาง path ลงไป
กด OK OK จนปิดหน้า properties windows ไป - ทดสอบเปิด CMD แล้วพิมพ์ flutter doctor

- กลับ android studio หน้าแรกเลือก plugin ค้นหา flutter แล้วทำการ install
พอลงเสร็จกด restart IDE

- new flutter project



- แก้ไขโค้ด ใน main.dart
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // TRY THIS: Try running your application with "flutter run". You'll see // the application has a purple toolbar. Then, without quitting the app, // try changing the seedColor in the colorScheme below to Colors.green // and then invoke "hot reload" (save your changes or press the "hot // reload" button in // // // // // // // // // // // // // // // // // // // // a Flutter-supported IDE, or press "r" if you used // the command line to start the app). // // Notice that the counter didn't reset back to zero; the application // state is not lost during the reload. To reset the state, use hot // restart instead. // // This works for code too, not just values: Most code changes can be // tested with just a hot reload. colorScheme: .fromSeed(seedColor: Colors.deepPurple), ), home: const MyHomePage(title: 'ssssssssss'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); // This widget is the home page of your application. It is stateful, meaning // that it has a State object (defined below) that contains fields that affect // how it looks. // This class is the configuration for the state. It holds the values (in this // case the title) provided by the parent (in this case the App widget) and // used by the build method of the State. Fields in a Widget subclass are // always marked "final". final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { // This call to setState tells the Flutter framework that something has // changed in this State, which causes it to rerun the build method below // so that the display can reflect the updated values. If we changed // _counter without calling setState(), then the build method would not be // called again, and so nothing would appear to happen. _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text('ssssssss5587455'), ), body: Center( child: Column( mainAxisAlignment: .center, children: [ //สร้าง object เพื่อแสดงผลตรงนี้ ], ), ), ); } } - การเอาภาพแสดงในแอพ แบบเอาจากอินเตอร์เน็ต ให้ใช้ Image.network(‘url image’)
body: Center( child: Column( mainAxisAlignment: .center, children: [ //สร้าง object เพื่อแสดงผลตรงนี้ //เอาภาพจาก url มาลงในแอพใช้คำสั่งนี้ Image.network('https://media.wired.com/photos/6423826d7f6ce88e606d7b55/3:2/w_2560%2Cc_limit/Lamborghini-Revuelto-Featured-Gear.jpg'), ], ), ), - เอาภาพจากในแอพ
ไปที่ pubspec.yaml ทำการเปิด asset แล้วเปิด -images/ ตามภาพ
ไปคลิกขวาที่โปรเจ็ค ด้านบนซ้าย แล้วเลือก new directory ตั้งชื่อ images
กดไปที่ pubspec.yaml แล้วกดปุ่ม pub get ที่อยู่ขวาบน
เอารูปไปใส่ใน images copy – pasted

- หลังจากนั้นกลับไปที่ main.dart แล้วเพิ่มโค้ด Image.asset เพื่อเรียกไฟล์ใน folder images
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // TRY THIS: Try running your application with "flutter run". You'll see // the application has a purple toolbar. Then, without quitting the app, // try changing the seedColor in the colorScheme below to Colors.green // and then invoke "hot reload" (save your changes or press the "hot // reload" button in // // // // // // // // // // // // // // // // // // // // a Flutter-supported IDE, or press "r" if you used // the command line to start the app). // // Notice that the counter didn't reset back to zero; the application // state is not lost during the reload. To reset the state, use hot // restart instead. // // This works for code too, not just values: Most code changes can be // tested with just a hot reload. colorScheme: .fromSeed(seedColor: Colors.deepPurple), ), home: const MyHomePage(title: 'ssssssssss'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); // This widget is the home page of your application. It is stateful, meaning // that it has a State object (defined below) that contains fields that affect // how it looks. // This class is the configuration for the state. It holds the values (in this // case the title) provided by the parent (in this case the App widget) and // used by the build method of the State. Fields in a Widget subclass are // always marked "final". final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { // This call to setState tells the Flutter framework that something has // changed in this State, which causes it to rerun the build method below // so that the display can reflect the updated values. If we changed // _counter without calling setState(), then the build method would not be // called again, and so nothing would appear to happen. _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text('ssssssss5587455'), ), body: Center( child: Column( mainAxisAlignment: .center, children: [ //สร้าง object เพื่อแสดงผลตรงนี้ //เอาภาพจาก url มาลงในแอพใช้คำสั่งนี้ Image.network('https://media.wired.com/photos/6423826d7f6ce88e606d7b55/3:2/w_2560%2Cc_limit/Lamborghini-Revuelto-Featured-Gear.jpg'), //เรียกรูปใน folder image แต่ต้องเปิด pubspec.yaml ด้วย Image.asset('images/car.png'), Text('Welcome my world'), ], ), ), ); } } - BMI Code
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: BMIPage(), ); } } class BMIPage extends StatefulWidget { const BMIPage({super.key}); @override State<BMIPage> createState() => _BMIPageState(); } class _BMIPageState extends State<BMIPage> { final TextEditingController weightController = TextEditingController(); final TextEditingController heightController = TextEditingController(); double bmi = 0; String result = ''; void calculateBMI() { double weight = double.tryParse(weightController.text) ?? 0; double heightCm = double.tryParse(heightController.text) ?? 0; if (weight <= 0 || heightCm <= 0) { return; } double heightM = heightCm / 100; double bmiValue = weight / (heightM * heightM); String status; if (bmiValue < 18.5) { status = 'ผอม'; } else if (bmiValue < 25) { status = 'ปกติ'; } else { status = 'อ้วน'; } setState(() { bmi = bmiValue; result = status; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('BMI Calculator'), ), body: Padding( padding: const EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ const Text( 'น้ำหนัก (กิโลกรัม)', style: TextStyle(fontSize: 18), ), const SizedBox(height: 8), TextField( controller: weightController, keyboardType: TextInputType.number, decoration: const InputDecoration( border: OutlineInputBorder(), hintText: 'เช่น 70', ), ), const SizedBox(height: 16), const Text( 'ส่วนสูง (เซนติเมตร)', style: TextStyle(fontSize: 18), ), const SizedBox(height: 8), TextField( controller: heightController, keyboardType: TextInputType.number, decoration: const InputDecoration( border: OutlineInputBorder(), hintText: 'เช่น 170', ), ), const SizedBox(height: 24), ElevatedButton( onPressed: calculateBMI, child: const Text( 'คำนวณ BMI', ), ), const SizedBox(height: 24), if (bmi > 0) Card( child: Padding( padding: const EdgeInsets.all(16), child: Column( children: [ Text( 'BMI = ${bmi.toStringAsFixed(2)}', style: const TextStyle( fontSize: 24, fontWeight: FontWeight.bold, ), ), const SizedBox( height: 10), Text( result, style: const TextStyle( fontSize: 22, color: Colors.blue, ), ), ], ), ), ), ], ), ), ); } }

