A flutter project with a description of the basic Flutter framework

Overview

flutter

  • Pengenalan kepada Mobile Platform (Slide)
  • Apa itu Flutter Framework
  • Pemasangan persekitaran Flutter, Android SDK & VSCode IDE
  • Widget Layout & UI Element

Latihan 1

Menghasilkan projek flutter dengan penerangan kerangka asas Flutter

  • StatelessWidget
  • MaterialApp
  • Scaffold

StatelessWidget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  }
}

StatefulWidget

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  }
}

Latihan 1 : flutter_application_1

Latihan 2

Merangka Layout berasaskan Column dan Row bagi membentuk satu susunan layout yang dikehendaki didalam antaramuka aplikasi

flutter layout

  • StatelessWidget
  • MaterialApp
  • Scaffold
  • Widget Column and children
  • Widget Row and children
  • Widget Container and child

Latihan 2 : flutter_application_2

Latihan 3

Melengkapkan Layout Column dan Row dengan kandungan seperti Widget Text & Image untuk menghasilkan aplikasi lebih menarik

flutter apps

Mewujudkan fail home.dart yang berasingan bagi penyusunan struktur projek

  • Widget Column and children
  • Widget Row and children
  • Widget Container and child
    • Widget Center
    • Widget Text
    • Widget Image
    • Dependencies : images
  • Navigator push and pop

double? width MediaQuery.of(context).size.width

double? height MediaQuery.of(context).size.height

Latihan 4 : flutter_application_3

Latihan 4

Mewujudkan fail show.dart untu memaparkan butiran dari home.dart

  • Dependencies : fonts
    • fontFamily: 'Bubblegum'
  • Navigator push and pop
    • Widget InkWell
  • Data Model
  • ListView Builder
  • UI Element ListTile()

Custom Widget : KlikGambarWidget()

class KlikGambarWidget extends StatelessWidget {
  KlikGambarWidget({
    Key? key,
    required this.title,
    required this.nama,
  }) : super(key: key);

  String title;
  String nama;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => ShowPage(gambar: nama, title: title)));
      },
      child: Container(
        height: 100,
        width: MediaQuery.of(context).size.width * 0.25,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('images/$nama'), fit: BoxFit.cover)),
      ),
    );
  }
}

Data Models

class Gambar {
  String gambar;
  String tajuk;

  Gambar({required this.gambar, required this.tajuk});
}

Data List

List<Gambar> semua = [
  Gambar(gambar: 'avatar/avatar1.png', tajuk: 'Avatar 1'),
  Gambar(gambar: 'avatar/avatar2.png', tajuk: 'Avatar 2'),
  Gambar(gambar: 'avatar/avatar3.png', tajuk: 'Avatar 3'),
  Gambar(gambar: 'avatar/avatar4.png', tajuk: 'Avatar 4'),
  Gambar(gambar: 'avatar/avatar5.png', tajuk: 'Avatar 5'),
];

Latihan 4 : flutter_application_4

Latihan 5

Membina Drawer() (side bar) dan simpan sebagai widgets/menu.dart

  import 'package:flutter/material.dart';
import 'package:flutter_application_4/pages/home.dart';
import 'package:flutter_application_4/pages/list.dart';
import 'package:flutter_application_4/pages/listdata.dart';

class MenuWidget extends StatelessWidget {
  const MenuWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 5.0),
            width: MediaQuery.of(context).size.width,
            height: 80,
            alignment: Alignment.centerRight,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('images/fruit/fruit_main.jpg'),
                    fit: BoxFit.cover)),
            child: const Text('Fruit App',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    letterSpacing: 3.5,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Bubblegum')),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
            onTap: () {
              //Navigator
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => Home()));
            },
          ),
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text('My Fruit'),
            onTap: () {
              //Navigator
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => ListPage()));
            },
          ),
          ListTile(
            leading: Icon(Icons.batch_prediction),
            title: Text('Fruit Data'),
            onTap: () {
              //Navigator
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => ListDataPage()));
            },
          ),
        ],
      ),
    );
  }
}

Menghasilkan AppBar action button utk LoginPage()

  • Widget Form()
  • Widget TextFormField()
  • Widget ElevatedButton()

Mengubah App icon launcher menggunakan plugin https://pub.dev/packages/flutter_launcher_icons

  flutter_launcher_icons: ^0.9.2  

  flutter_icons:
    android: "launcher_icon"
    ios: true
    image_path: "images/icon/logo.png"
  flutter pub run flutter_launcher_icons:main 

In the above configuration, the package is setup to replace the existing launcher icons

Menghasilkan apk dengan CLI flutter build apk

Latihan 5 : flutter_application_5

Rujukan

You might also like...

This project demonstarates UI setup for some basic flutter widgets.

 This project demonstarates UI setup for some basic flutter widgets.

Flutter Widgets This project demonstarates UI setup for some basic flutter widgets. Container | | Text | | Button | | Textfield | | Column | | Row | |

Nov 20, 2021

Project demonstrates building a simple chat application using Flutter framework and Firebase cloud

Project demonstrates building a simple chat application using Flutter framework and Firebase cloud

Flutter Chat on Firebase Project demonstrates building a simple chat application using Flutter framework and Firebase cloud. App does not poll for new

Feb 2, 2022

This is an application that uses the Flutter framework, SQFLite as a database to record blood pressure, blood sugar, BMI, or create medication reminders in multi mobile platforms You can run this project on iOS, Android

This is an application that uses the Flutter framework, SQFLite as a database to record  blood pressure, blood sugar, BMI, or create medication reminders in multi mobile platforms You can run this project on iOS, Android

This is an application that uses the Flutter framework, SQFLite as a database to record blood pressure, blood sugar, BMI, or create medication reminders in multi mobile platforms You can run this project on iOS, Android

Dec 29, 2022

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Jan 3, 2023

[Example APPS] Basic Flutter apps, for flutter devs.

[Example APPS] Basic Flutter apps, for flutter devs.

Show some ❤️ and star the repo to support the project This repository containing links of all the example apps demonstrating features/functionality/in

Jan 2, 2023

Flutter-web-portfolio - A Basic web portfolio built using flutter

Flutter-web-portfolio - A Basic web portfolio built using flutter

My Flutter Web Portfolio It is a basic flutter web portfolio. 1. Home To use thi

May 30, 2022

Basic Flutter apps, for flutter devs

flutter_do Basic Flutter apps, for flutter devs. 一个帮助开发者加深了解 Flutter 的项目,提供了 N 多个常用 Widget 和自定义 Widget 的使用及实现方法,涵盖了系统 Widget 、布局容器、动画、高阶功能、自定义 Widget

May 21, 2022

Love-Calculator-Flutter - A Love Calculator Flutter app created for learning basic stuffs in Dart

Love-Calculator-Flutter - A Love Calculator Flutter app created for learning basic stuffs in Dart

Love Calculator The same old Love Calculator ,but in flutter NB A simple flutter

Nov 14, 2022

A basic demonstration for creating a Jardinains (Fancy Pong-Like) Game in Flutter

A basic demonstration for creating a Jardinains (Fancy Pong-Like) Game in Flutter

Jardinains Flutter! 🕹 Play Here - Web https://flutter-jardinains.web.app/#/ Demo Note: For optimal performance run the project in profile mode using

Nov 12, 2022
Owner
Mohamad Zaki Mustafa
Mohamad Zaki Mustafa
BreakingBad-App - A description of the Braking Bad series, using flutter bloc

breaking_bad The application is a description of the Braking Bad series Using Bl

Mohamed Hossam 0 Jan 9, 2022
Extract pubspec details (such as package version, author and description) into Dart code.

build_pubspec This package helps you convert fields from your pubspec.yaml file into Dart code. Based on the fields in your pubspec, this package will

dartside.dev 9 Jul 15, 2021
The project of the empty template with Flutter has built the basic framework to realize the functions of internationalization, theme peeling etc.

flutter-bloc-app-template ?? The project of the empty template with Flutter has built the basic framework to realize the functions of internationaliza

Oleksii Shtanko 30 Dec 31, 2022
Basic file managing app for Android using Flutter framework

core_file_manager A simple application for managing files on Android devices using Flutter framework core_file_manager Getting Started Running the app

Mohamed Naga 25 Sep 20, 2022
Flying Fish is full-stack Dart framework - a semi-opinionated framework for building applications exclusively using Dart and Flutter

Flying Fish is full-stack Dart framework - a semi-opinionated framework for building applications exclusively using Dart and Flutter.

Flutter Fish 3 Dec 27, 2022
Intel Corporation 238 Dec 24, 2022
The ROHD Verification Framework is a hardware verification framework built upon ROHD for building testbenches.

ROHD Verification Framework The ROHD Verification Framework (ROHD-VF) is a verification framework built upon the Rapid Open Hardware Development (ROHD

Intel Corporation 18 Dec 20, 2022
Felipe Dias Casseb 2 Feb 9, 2022
A basic boilerplate template for starting a Flutter GetX project. GetX, Dio, MVVM, get CLI, Localization, Pagination etc are implemented.

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package for State management, routing and Dependency Injection (bindings). We

Hasan Abdullah 214 Jan 9, 2023
Profile page ui - First Flutter Project. Just basic UI and Interaction experimentation.

Profile Page UI My first Flutter UI Page. Just experimenting with App Dev. Features The main home screen looks initially like this, The Follow Button

Aryan Bakshi 0 Jan 1, 2022