Membuat Aplikasi Sederhana Dengan Flutter VS Code

Tutorial Membuat Aplikasi Sederhana di Flutter dan VS Code.  didalam Tutorial kali ini Mari membuat aplikasi flutter sederhana untuk memahami dasar-dasar pembuatan aplikasi flutter di VS code.

bagi yang belum tahu developer tool yang digunakan bisa baca artikel sebelumnya. yuk langsung saja

1. Pilih Folder untuk tempat Directory projectnya. kali ini saya ingin menyimpannya pada folder Fulter di dalam Document

   

    

2. Klik File -> Open Windows PowerShell -> Open Windows PowerShell

   

3. Ketik kan perintah flutter create app_flutter pada powershell yang baru dibuka.

   

4. tunggu sebentar proses persiapan projectnya. ketika project flutter sudah selesai akan menjadi

   

5. Buka folder app_flutter pada folder yang kita buat tadi  sehingga menjadi

   

   Komponen struktur aplikasi Flutter akan dijelaskan di sini:

   1. android – Kode sumber yang dibuat secara otomatis untuk membuat aplikasi android
   2. ios – Kode sumber yang dibuat secara otomatis untuk membuat aplikasi ios
   3. lib – Folder utama yang berisi kode Dart yang ditulis menggunakan framework flutter
   4. lib/main.dart – kode aplikasi Flutter
   5. test – Folder berisi kode Dart untuk menguji aplikasi flutter
   6. test/widget_test.dart – Contoh kode
   7. .gitignore – File kontrol versi Git
   8. .metadata – dibuat secara otomatis oleh alat flutter
   9. .packages – dibuat secara otomatis untuk melacak paket flutter
   10. pubspec.yaml – Digunakan oleh Pub, pengelola paket Flutter
   11. pubspec.lock – Dibuat secara otomatis oleh pengelola paket Flutter, Pub
   12. README.md – File deskripsi proyek yang ditulis dalam format Markdown format
6. Buka Project di VS Code dengan Klik kanan -> Open in Visual Studio Code
7. didalam folder lib/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(
         title: 'Flutter Demo',
         theme: ThemeData(
           // This is the theme of your application.
           //
           // Try running your application with "flutter run". You'll see the
           // application has a blue toolbar. Then, without quitting the app, try
           // changing the primarySwatch below to Colors.green and then invoke
           // "hot reload" (press "r" in the console where you ran "flutter run",
           // or simply save your changes to "hot reload" in a Flutter IDE).
           // Notice that the counter didn't reset back to zero; the application
           // is not restarted.
           primarySwatch: Colors.blue,
           // This makes the visual density adapt to the platform that you run
           // the app on. For desktop platforms, the controls will be smaller and
           // closer together (more dense) than on mobile platforms.
           visualDensity: VisualDensity.adaptivePlatformDensity,
         ),
         home: MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
   
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State {
     int _counter = 0;
   
     void _incrementCounter() {
       setState(() {
       _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
         title: Text(widget.title),
         ),
         body: Center(
           // Center is a layout widget. It takes a single child and positions it
           // in the middle of the parent.
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text(
                 'You have pushed the button this many times:',
               ),
               Text(
                 '$_counter',
                 style: Theme.of(context).textTheme.headline4,
               ),
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: Icon(Icons.add),
         ), // This trailing comma makes auto-formatting nicer for build methods.
       );

   import 'package:flutter/material.dart';

8. kita coba untuk menjalan kan aplikasi tersebut dengan menekan F5 dan tunggu sebentar untuk mendebug