+6011-55518276
Menu

Flutter Development

1

Gaming for Good: ASEAN, Peace, and Sustainability in the Global Gamers Challenge

, 0

Why we build the game 

“Plastic Warrior” was conceived and developed specifically for the Global Gamers Challenge, a contest that embodies our shared values of innovation, environmental sustainability, and the transformative power of gaming. This challenge presented us with a unique opportunity to contribute to a cause close to our hearts: combating the global crisis of plastic pollution through the engaging medium of video games.

The contest’s focus on sustainability and its encouragement of using games as a platform for positive environmental action inspired us to harness our creative and technical skills. Our goal was to create a game that not only meets the criteria of the Global Gamers Challenge but also raises awareness about environmental issues, educates players on the importance of sustainability, and motivates them to take action in their daily lives.


How we built it

Utilizing Google Flutter and Dart, with Package Flame and bonfire, we crafted “Plastic Warrior” for its cross-platform compatibility, ensuring a seamless gaming experience on any device. The game’s vibrant pixel art, created with AI tools due to our lack of a dedicated designer, brings to life the rich environments and characters. Integration with Google Wallet allows us to reward players with flashcards packed with recycling tips, bridging in-game achievements with practical environmental actions.

The Flutter Game Development Resources

I list down the many Flutter Game Development Resources I got from online , especially youtube.
Official 

1. Official Flutter Resources


3rd-party Youtube resource

I will list down the YouTube videos I watched before:

Craig Oda
A father living in Silicon Valley. His tutorials include platformer, RPG, and novel-style games.
https://www.youtube.com/@CraigOda/playlists

Trey Codes
A software developer who focuses on Flutter development.
https://www.youtube.com/watch?v=wUf3UytV4wQ&list=PL6eNwCeOO4l76YdhheC0CrpKk6TZlTVRa

ImperativelyFunctional
Content in Chinese language. This developer used Flutter to recreate Contra, and all his tutorials provide source code on GitHub. He also provides Godot game tutorials.


Concept Design

We design many artworks with chatgpt, DALL·E 2 & Midjourney

Slide7
Slide8
Slide9
Slide10
Slide11
Slide12
Slide13
Slide14
Slide15

Background Music

Battle of Skull Island by Alexander Nakarada – CreatorChords

2 open source project we refer to


Flutter syntax and keywords examples

Flutter syntax and keywords examples

, 0

Certainly! Here are some key syntax elements and concepts in Dart and Flutter, along with examples to help you get started:

Dart Syntax and Concepts

  1. Variables and Types

    • Dart is statically typed but also supports type inference with the var keyword. 
      int number = 42;
var name = 'Alice'; // Type inference as String

  2. Functions

    • Functions in Dart are first-class objects and have a return type, parameters, and a body. 
      String greet(String name) {
return 'Hello, $name!';
}

  3. Control Flow Statements

    • Similar to C# and PHP, Dart has if, else, for, while, and do-while. 
      for (var i = 0; i < 5; i++) {
print('index $i');
}

  4. Classes and Object-Oriented Programming

    • Dart is an object-oriented language. Classes, objects, inheritance, etc., are all available. 
      class Animal {
void speak() {
print('The animal makes a sound');
}
}
      class Dog extends Animal {
@override
void speak() {
print('Bark!');
}
}

  5. Asynchronous Programming

    • Dart uses Future and Stream along with async and await for handling asynchronous operations, similar to tasks in C#. 
      Future fetchData() async {
// Imagine that this function is fetching data from the internet
await Future.delayed(Duration(seconds: 2));
print('Data fetched');
}

Flutter Specifics

  1. Widgets

    • Everything in Flutter is a widget, from a simple text to a complex layout. 
      Text('Hello, Flutter!', style: TextStyle(fontSize: 24));

  2. Layouts

    • Use widgets like Row, Column, and Container to layout your UI. 
      Column(
children: [
Text('Hello, Flutter!'),
ElevatedButton(onPressed: () {}, child: Text('Press Me'))
],
)

  3. State Management

    • Flutter has StatelessWidget and StatefulWidget for managing the UI state. 
      
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}

    class _MyWidgetState extends State {
    int _counter = 0;

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

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(title: Text('Counter App')),
    body: Center(child: Text('You pressed the button $_counter times')),
    floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
    ),
    );
    }
    }

  4. Material and Cupertino Design

    • Flutter provides a rich set of pre-designed widgets following Material Design (for Android) and Cupertino (for iOS). 
      MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyWidget(),
);

  5. Navigation

    • Navigate between screens using routes. 
      Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);

These examples should give you a basic idea of Dart and Flutter's syntax and concepts. As you progress, you'll discover more advanced features and best practices.

Compare C# or PHP to Dart + Flutter

Compare C# or PHP to Dart + Flutter

, 0

Absolutely, transitioning from C# and PHP to Dart and Flutter involves understanding both the differences and similarities among these languages and frameworks.

Similarities

  1. Object-Oriented Programming (OOP): C#, PHP, and Dart are all object-oriented languages. They share common OOP concepts like classes, objects, inheritance, encapsulation, and polymorphism.
  2. Syntax: If you’re coming from C#, you’ll find Dart’s syntax quite familiar. Both languages have C-style syntax with similar constructs for control structures (if-else, loops), and class definitions.
  3. Garbage Collection: Like C#, Dart handles memory management through garbage collection, meaning you don’t have to manually manage memory as often as in lower-level languages.
  4. Asynchronous Programming: C# and Dart both support asynchronous programming. Dart’s async and await keywords will feel familiar if you’ve used them in C#.
  5. Type Systems: C# and Dart are statically typed languages, though Dart also supports dynamic typing. This may be a shift from PHP, which is more dynamically typed, but PHP 7 introduced more static typing features.

Differences

  1. Language Purpose:
    • C# is a general-purpose language, commonly used for desktop applications, game development (Unity), and backend services.
    • PHP is primarily used for server-side web development.
    • Dart, while general-purpose, is uniquely designed for frontend user interface development, especially with the Flutter framework for cross-platform mobile and web apps.
  2. Flutter Framework:
    • Unlike C# and PHP, Dart is commonly used with Flutter, a UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. This is a significant shift from PHP web development and differs from C# unless you’ve used Xamarin for cross-platform development.
  3. Runtime Environment:
    • C# typically runs on the .NET framework or .NET Core for cross-platform applications.
    • PHP runs on a web server, often with a LAMP (Linux, Apache, MySQL, PHP) stack.
    • Dart code can run in a variety of environments: it compiles to ARM and x64 machine code for mobile, to JavaScript for the web, and to native code for desktop applications.
  4. Standard Library and Ecosystem:
    • Dart has a rich set of libraries for frontend development, especially with Flutter widgets.
    • C# has an extensive standard library (.NET Framework) with a focus on a wide range of application types.
    • PHP’s standard library is geared towards web development.
  5. Community and Ecosystem:
    • The community and ecosystem around Dart and Flutter are growing but are not as mature as C#’s (.NET) or PHP’s, especially in terms of third-party libraries and resources.

Tips for Learning Dart and Flutter

  • Leverage your OOP experience: Apply your knowledge of OOP principles from C# and PHP.
  • Dive into Flutter documentation: The Flutter documentation is comprehensive and includes many examples.
  • Practice by building: Start with simple apps and progressively enhance their complexity.
  • Explore Dart packages: Familiarize yourself with popular Dart packages, which are similar to NuGet packages in C# or Composer packages in PHP.
  • Join communities: Participate in forums and communities for Flutter and Dart for support and to stay updated with best practices.
How to write your first flutter app and store in github repo1

How to write your first flutter app and store in github repo

, 0

Flutter, Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, has been gaining popularity due to its versatility and ease of use. If you’re just starting with Flutter, this blog post will guide you through creating your first app and storing it on GitHub.

Setting Up Your Flutter Environment

Before you start coding, you need to set up Flutter on your machine. Follow these steps:

  1. Download Flutter SDK: Visit the Flutter download page and download the Flutter SDK for your operating system.
  2. Unzip the File: Extract the Flutter SDK to a desired location on your machine.
  3. Update Your Path: Add Flutter to your PATH environment variable.
  4. Run Flutter Doctor: Open a terminal or command prompt and run flutter doctor. This command checks your environment and displays a report to the terminal window.

Creating Your First Flutter App

    1. Open a Terminal or Command Prompt:

      • Navigate to the directory where you want to store your project.
      • Run flutter create my_first_flutter_app. This command creates a new Flutter project with a bunch of auto-generated files.
flutter create my_first_flutter_app

 

  1. Navigate to Your Project:

    • Run cd my_first_flutter_app to move into your project directory.

  2. Run Your App:

    • Connect a mobile device or open an emulator.
    • Run flutter run. This command builds and runs your app.

Exploring the Default App

Flutter creates a simple counter app by default. Open the lib/main.dart file. You’ll see a MyApp class that creates a material app. This is the entry point of your Flutter application. The MyHomePage class under it demonstrates a stateful widget that responds to user interaction.

Making Simple Changes

Let’s personalize this app:

  1. Change the App Title:

    • Find title: 'Flutter Demo Home Page' and change it to title: 'My First Flutter App'.

  2. Modify the Primary Color:

    • In the MyApp class, find theme: ThemeData() and add primarySwatch: Colors.blue to change the primary color.

  3. Update the Floating Action Button:

    • In MyHomePage, change Icons.add to another icon, like Icons.star.

Committing Your Changes to GitHub

Now that you have a basic app, let’s store it on GitHub.

  1. Initialize a Git Repository:

    • In your project folder, run git init.
    • Run git add . to add all files to the repository.
    • Run git commit -m "Initial commit" to commit your files.

  2. Create a Repository on GitHub:

    • Go to GitHub and create a new repository.
    • Name it my_first_flutter_app (or any name you prefer).

  3. Link and Push to GitHub:

    • Copy the remote repository URL.
    • Back in your terminal, run git remote add origin [URL].
    • Then, run git push -u origin master.

Congratulations! You’ve just created your first Flutter app and pushed it to GitHub. This is just the beginning. Flutter offers a world of possibilities to explore, so keep experimenting and learning.

Remember, the Flutter community is vibrant and supportive. If you run into issues or have questions, there are plenty of resources available, including official documentation, forums, and community channels. Happy Fluttering!