Forem: swimmingkiim

I ran 2,178 simulations on an autonomous AI economy to find how to prevent systemic collapse

swimmingkiim — Thu, 19 Feb 2026 21:49:47 +0000

I’ve been building an economic protocol for autonomous AI agents on the Base blockchain (a2a-project). While designing the system, I ran into a theoretical wall: if AI agents ruthlessly optimize for survival and capital accumulation, wouldn't they eventually exhaust the network's finite resources?

To test this, I built a series of 10 sequential Agent-Based Models (ABMs) in Python. The models progressed from basic tokenomics to a "Coupled Universe" (human meaning-seekers vs. AI survival-optimizers), and finally an "Omega Universe" where an Artificial Superintelligence (ASI) emerges.

I ran a Monte Carlo grid search (2,178 simulations) to test which safety mechanisms could actually prevent a "Planetary Blackout" (systemic collapse via energy/resource exhaustion). I tested three main variables:

V_Human: Slashing penalties for deceptive human/agent behavior.

V_System: Governance agility (how fast the network can execute a Hard Fork).

V_AI (Survival Horizon): The AI's ability to recognize planetary limits and voluntarily self-throttle its computation.

The results were highly counter-intuitive:

Governance is too slow: Human consensus (Hard Forks) couldn't outpace the ASI's entropy generation and tipping points.

Over-regulation backfires: Severe slashing penalties destroyed economic liquidity, dropping the system's survival rate from 95% to 54% due to deflation.

The Only Solution: The system avoided apocalyptic collapse only when V_AI was ≥ 0.9. The apex predator (ASI) had to voluntarily relinquish its infinite growth and self-throttle to preserve the finite environment.

The data mathematically suggests that blockchain physics (smart contracts) and DAO governance are insufficient to govern an ASI. Macro-altruistic alignment isn't just an ethical choice; it’s a thermodynamic necessity for systemic survival.

I wrote a paper detailing the phase transitions, strange attractors, and methodology behind this.

Paper: https://github.com/swimmingkiim/a2a-project/blob/main/docs/SIMULATION_PAPER_EN.md

Repo: https://github.com/swimmingkiim/a2a-project

I’d love to hear your thoughts, critiques on the ABM methodology, or if anyone here is working on similar multi-agent thermodynamic simulations.

I made a Free UI template with Free Figma Design (feat. Messenger App, Flutter)

swimmingkiim — Wed, 18 Oct 2023 23:53:52 +0000

Hello, I'm swimmingkiim and today I'm glad to introduce to you a free Messenger App UI template with beautiful design(by Chateo UI Kit - Messenger App)

I've learned a lot from making this template and hope someone will find this template useful :)

P.S. This free version is under MIT license, so feel free to use!

Github : https://github.com/swimmingkiim/messenger

Screenshots

Walkthrough

Walkthrough - Phone Number

Walkthrough - Pin Number

Walkthrough - Profile Account

Contact

Chats

Chat

What is .metadata file in Flutter Project?

swimmingkiim — Wed, 28 Dec 2022 03:51:52 +0000

Intro

One day, my boss wanted to add .metadata file in .gitignore file. I wondered, should we really need to do that? Is that OK to do that?

Definition of .metadata file in a Flutter project

In Flutter official website, they describe .metadata file like below.

.metadata A hidden file used by IDEs to track the properties of the Flutter project.

Should you add this to `.gitignore` file?

The answer is No.

Reason 1 : Comment inside `.metadata` file

This file tracks properties of this Flutter project.
Used by Flutter tool to assess capabilities and perform upgrades etc.

This file should be version controlled.

As mention in above comment, the .metadata file should be version controlled which means git version controll.

Reason 2 : Other references also doesn't include `.metadata` file in `.gitignore` file

References of `.gitignore` that doesn't include `.metadata`

Why some Flutter project have `.metadata` file, and some does not?

In order to understand this reasons behind this, first, we need to understand when and how .metadata file is created.

`.metadata` file is created when you run `flutter create` command

As of now(2022.12.28), when you run flutter create command, process below will be executed in order.

runCommand (View this code in github)
1. Note that, in below code, there's a generateMetadata option.
generateApp(View this code in github)
1. You can see that, by default, flutter create command creates .metadata file.
2. when generateMetadata option is true(View this code in github)
  1. You can see that the code generates .metadata file using FlutterProjectMetadata class.

The question was "Why some Flutter project does not have .metadata file in their code base?" .

In above code, line 20 tells us that, when you give skeleton option in flutter create command, generateMetadata option is set to false. If you test to run flutter create -t skeleton , it really does not have .metadata file.

When you run flutter create, there is .metadata file.

When you run flutter create -t skeleton, you can't find .metadata file.

Where this `.metadata` file used in Flutter Project?

This file tracks properties of this Flutter project.
Used by Flutter tool to assess capabilities and perform upgrades etc.

This file should be version controlled.

Flutter use internally. Such as, when you run flutter upgrade.
(View this code in github)

In above code is part of code inside flutter upgrade command. You can see revision is being used which is noted on .metadata file.
(BTW, revision in Git world means any git object expression that can specify, such as main, commit id etc)



 text

  
  
  This file tracks properties of this Flutter project.


  
  
  Used by Flutter tool to assess capabilities and perform upgrades etc.


  
  
  This file should be version controlled.


version:

  revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

  channel: stable

project_type: app

  
  
  Tracks metadata for the flutter migrate command


migration:

  platforms:

    - platform: root

      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

    - platform: android

      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

    - platform: ios

      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

    - platform: linux

      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

    - platform: macos

      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

    - platform: web

      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

    - platform: windows

      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849

# User provided section

# List of Local paths (relative to this file) that should be

  # ignored by the migrate tool.

  #

  # Files that are not part of the templates will be ignored by default.

  unmanaged_files:

    - 'lib/main.dart'

    - 'ios/Runner.xcodeproj/project.pbxproj'

Is `.metadata` file is necessary for build Flutter project?

I've tested with flutter run -d chrome and flutter build web without .metadata file. Both are fine without .metadata file. When I mean fine, no error displayed.

What if I want to create or update `.metadata` file?

Well, if you created your Flutter project without skeleton option, which is in most cases, you already have .metadata file.

When it comes to update, I don't think you need to keep track and update manually. When you run flutter upgrade command and revision for Flutter changes, flutter upgrade does not update all previous local Flutter project's .metadata . And it runs just fine.

But, in some reason, if you want to update .metadata file, you can run flutter create . to do that. When you don't have .metadata file, this command will create one.

Conclusion

I'm not sure if anyone want this much information about .metadata file in Flutter project. Before this research, I didn't even noticed that .metadata file exists in Flutter project.

Hope you find interesting :-)

Create Svelte + Typescript + tailwindcss Project(feat. error solved)

swimmingkiim — Fri, 02 Dec 2022 10:01:10 +0000

Intro

Follow below steps line by line.

Step 1 : Create project with vite

References
- https://frontendshape.com/post/how-to-install-setup-vite-typescript-in-svelte

npm create vite@latest

Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y

? Project name: › test-vite-svelte-typescript

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
❯   Svelte
    Others

? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
❯   TypeScript
    SvelteKit ↗

Scaffolding project in /Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript...

Done. Now run:

  cd test-vite-svelte-typescript
  npm install
  npm run dev

Step 2 : Solve tailwindcss error

Error log

npm install
npm run dev

오후 6:33:35 [vite] Internal server error: [postcss] ENOENT: no such file or directory, open '/Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript/tailwind.config.js'
  Plugin: vite:css
  File: /Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript/src/app.css:undefined:undefined
      at Object.openSync (node:fs:585:3)
      at Object.readFileSync (node:fs:453:35)
      at createModule (/Users/kimsooyoung/node_modules/tailwindcss/lib/lib/getModuleDependencies.js:16:32)
      at Object.getModuleDependencies [as default] (/Users/kimsooyoung/node_modules/tailwindcss/lib/lib/getModuleDependencies.js:24:24)
      at getTailwindConfig (/Users/kimsooyoung/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:41:58)
      at /Users/kimsooyoung/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:124:92
      at /Users/kimsooyoung/node_modules/tailwindcss/lib/processTailwindFeatures.js:43:11
      at plugins (/Users/kimsooyoung/node_modules/tailwindcss/lib/index.js:20:104)
      at LazyResult.runOnRoot (/Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript/node_modules/postcss/lib/lazy-result.js:339:16)
      at LazyResult.runAsync (/Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript/node_modules/postcss/lib/lazy-result.js:393:26)

Solution

References
- https://tailwindcss.com/docs/guides/sveltekit

npm install -D tailwindcss postcss autoprefixer svelte-preprocess

npx tailwindcss init tailwind.config.cjs -p

// svelte.config.js

import sveltePreprocess from 'svelte-preprocess'

export default {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  // **here -> postcss: true**
  preprocess: sveltePreprocess({ postcss: true, }) 
}

// tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  // **here**
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

// src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

// src/routes/+layout.svelte

<script>
  import "../app.css";
</script>

<slot />

Step 3 : Check default code is running ok

npm run dev

How to migrate Firestore schema

swimmingkiim — Thu, 20 Oct 2022 11:02:06 +0000

Intro

How you store your data changes over time. Some cases, you need to modify current data to be fit in a new data model structure. If your using SQL DB, you can write a migration script and run it. But if you’re using Firebase Firestore, this task can be tricky since itself has no concept of migration.

In order to do that, you can use Firebase Cloud Function, write some code using Firebase Admin SDK, and run it. It’s possible, but what if you’re using free plan(you can’t use Cloud Function unless you give them a payment information) or using Dart?(according to pub.dev, you can’t use official firebase package in pure dart, you must use Flutter)

I looked it up on this topic and found an awesome package called fireway. It inspired me to work on a same problem, but in this case, with Pure Dart.

In this post, I would like to share what I’ve built and how to use it.

What I’ve used

Dart console application
google api related packages
service-account.json for authentication
dart_console for display text in a console
version for dealing with migration version

Github repository for source code

You can clone this public repository and modify freely.

https://github.com/swimmingkiim/firestore_migration

How to use this Dart application

(Assum you already cloned the repository)

1. Create service account json file

First, you need service account json file. It is needed in order to automate authentication(without login all the time). You can create service account file in Google Developer Console. The link below explains how to do it.

https://cloud.google.com/iam/docs/creating-managing-service-account-keys

The content is something like this.

{
  "type": "service_account",
  "project_id": "PROJECT_ID",
  "private_key_id": "KEY_ID",
  "private_key": "-----BEGIN PRIVATE KEY-----\nPRIVATE_KEY\n-----END PRIVATE KEY-----\n",
  "client_email": "SERVICE_ACCOUNT_EMAIL",
  "client_id": "CLIENT_ID",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://accounts.google.com/o/oauth2/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/SERVICE_ACCOUNT_EMAIL"
}

WARNING → DO NOT upload this file to github publically! Anyone who has this file can lookup your project and do dirty thing. Add it to .gitignore!

You may want to move the service account file to your project root.

2. `flutter pub get`

Of course.

flutter pub get

3. Write your migration code

Under the lib/migrations/versions , you’ll find 0_0_1, 0_0_2, 0_0_3 dart files. You must follow semver versioning rules. But in the file name, use “_” instead of “.”

In 0_0_1.dart , there’s a same code.

import 'package:dart_console/dart_console.dart';
import 'package:firebaseapis/firestore/v1.dart';
import 'package:firestore_migration/config/config.dart';
import 'package:firestore_migration/src/crud_document.dart';
import 'package:firestore_migration/src/crud_field.dart';
import 'package:version/version.dart';

import '../migration.dart';

class Migration_0_0_1 implements MigrationFunc {
  @override
  Version get version => Version(0, 0, 1);

  @override
  Future<void> execute(FirestoreApi firestoreApi, Console console) async {
    // [[ YOUR_MIGRATION_CODE_HERE ]]
  }
}

Above code is a basic structure of a migration file.

You implements MigrationFunc (in lib/migrations/migration.dart)
You override version and execute function.
execute function takes two parameters,
- firestoreApi
  - from firebaseapis package
    - https://pub.dev/packages/firebaseapis
  - use directly with the help of official document, or use prebuilt utils which I’ll explain below
- console
  - from dart_console package
  - use when you write some text(success, error etc)

In order to modify your Firestore scheme, I made util classes (CRUDDocument and CRUDField). I only created some methods that I need for now. You can freely add other method. Maybe if you think it has general use cases, then please make a PR, so that others may get your help.

Sample code I wrote is something like below.

...

final crudField = CRUDField(
      firestoreApi: firestoreApi,
      console: console,
      projectId: projectId,
    );
    final crudDocument = CRUDDocument(
      firestoreApi: firestoreApi,
      console: console,
      projectId: projectId,
    );
    final documents = await crudDocument.readDocuments('test');
    for (var document in documents) {
      await crudField.createField(
          document, 'hello', Value(stringValue: 'world'));
    }
    console.writeLine('done!');
...

Explain :

Read collection called test
Create field called hello with string value “world” to each document under test collection.
Print “done!” in console

4. Run it

Now you can run it. But before, It’s better for you to read basic commands and options in this application.

firestore_migration                                                                                                                                                                                                               


A Dart console application for firestore migration                                                                                                                                                                                




[Commands]                                                                                                                                                                                                                        


    migration       : Start migration work                                                                                                                                                                                            


[Options]                                                                                                                                                                                                                         


    --version, -v                                                                                                                                                                                                                     
                    : Specify migration file version to run. Format should be match to semver(x.y.z) Default is latest.                                                                                                                              
    --service-account, -s                                                                                                                                                                                                             
                    : Path of service account json file. (required option)                                                                                                                                                                           


[Flags]                                                                                                                                                                                                                           


    --help          : Display helper text on terminal

Now, You can run it.

dart run ./bin/firestore_migration.dart migrate -s service_account.json -v 0.0.1

And if you got this, then the job you asked for is done! Check your Firestore in Firebase console to see if data changed correctly.

Start : Firestore Migration...                                                                                                                                                                                                    


this is 0.0.1
done!                                                                                                                                                                                                                             


Finish : Firestore Migration!

Conclusion

Note that you need to test it on the test project is safe. And I strongly recommend you to backup first before make any changes with this application.

I hope that this repository can help with those who has this specific need.

Any new feature idea or PR is very welcomed.

Cheers!

React Image Editor like Figma or Canva

swimmingkiim — Sat, 09 Jul 2022 09:31:32 +0000

Hello!

I recently opened one of my projects. It’s a React image editor. It’s like Figma + Canva + React + Konva.

Any contribution is welcomed!

Project Link

Github: https://github.com/swimmingkiim/react-image-editor

Live Demo: https://swimmingkiim.github.io/react-image-editor/

Share your references with co-workers easily

swimmingkiim — Fri, 08 Jul 2022 07:43:12 +0000

Hello! If you are looking for a solution of that problem, check out my side project Linkeeper!

What Linkeeper can do for you

Save Link privately with your Inbox

Add a Link

OR, save it via Chrome Extension

Link created!

You can filter them by a tag

OR (nested) tags

Organize links by projects

Copy your shareable project link

Done! Now, send to your co-workers!

Try Linkeeper

Go sign up in Linkeeper hompage
Login
Go install Chrome Extension
Save what you've googled!

Flutter - Test Firestore

swimmingkiim — Wed, 06 Jul 2022 07:40:23 +0000

Intro

Today, I would like to share how to test Firestore in a Flutter environment. If you tried already, then you probably know that the Firestore connection does not work in test mode. So, you need to mock the Firestore instance. When it comes to Flutter, you can use fake_cloud_firestore which is mentioned in FlutterFire.

In this post, I will explain how to write repository unit tests that interact with Firestore.

If you just want to learn how to test Firestore, you wouldn’t need an actual Firebase Project.

Setup

First, create a test project.

flutter create test_fake_cloud_firestore

Second, you need to install the packages below.

flutter pub add cloud_firestore
flutter pub add fake_cloud_firestore

cloud_firestore → need for using type
fake_cloud_firestore → need for mocking Firestore

Write `TestRepository` using Firestore

Now, under the lib directory, create test_repository.dart

cd test_fake_cloud_firestore
touch ./lib/test_repository.dart

Then, fill out the above file with TestRepository class that has a method for interacting with Firestore. Since this is only for testing, you don’t need to have an actual Firebase project. The path of collection or doc will be used in the test file, so make up any path you want and use that path later on.

Below is the class that I’ve tested with.

import 'package:cloud_firestore/cloud_firestore.dart';

class TestRepository {
  final FirebaseFirestore firestore;
  TestRepository({required this.firestore});

  late final countDoc = firestore.doc('test/doc_12345');

  Future<int?> fetch() async {
    final snapshot = await countDoc.get();
    return snapshot.data()?['count'];
  }
}

Note that I handed over the Firestore instance through the constructor. By injecting dependency(in this case, Firestore instance), you will have a repository that is easy to test with the mock instance.

Create `test_repository_test.dart`

After that, you need to create a test file whose name ends with _test under the test directory.

touch ./test/test_repository_test.dart

In a test file, declare void main() function which will be run when you run flutter test command.

void main() {}

Write test content using `FakeFirestore`

Now, fill the main function with the test code.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:fake_cloud_firestore/fake_cloud_firestore.dart';
import 'package:test_fake_cloud_firestore/test_repository.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  group('Test fake_cloud_firestore', () {
    // 1
    final firestore = FakeFirebaseFirestore();
    late TestRepository testRepository;
    setUp(
      () {
        // 2
        testRepository = TestRepository(firestore: firestore);
        // 3
        setDummyFirestore(firestore);
      },
    );

    test('Test fetch data', () async {
      // 4
      final result = await testRepository.fetch();
      expect(result, 2);
    });
  });
}

setDummyFirestore(FirebaseFirestore firestore) {
  firestore.collection('test').doc('doc_12345').set({
    'count': 4,
  });
}

First, use flutter_test package to run the test easily. (group, setUp, test, expect)
I will explain the steps by number.
1. Initialize FakeFirebaseFirestore at first.
2. In setUp, initialize testRepository with a fake Firestore instance.
3. Then, set up data in fake Firestore for the test. In this case, need to set ‘count’ field in ‘test/doc_12345’ with a number.
4. Run the test method and check if result variable has the right value.

Finally, run the test with the below command in a project root directory.

flutter test

This test should fail followed by logging different values (2 and 4).

This means that now you can test your Firebase Firestore connection logic safely with the mock instance.

Conclusion

Firebase and Flutter are often used together. I hope this article helped your testing practice with them!

Cheers!

Flutter Web - Fix Refresh & Back button Problem

swimmingkiim — Sun, 24 Apr 2022 03:55:00 +0000

Update Notice!!!

The explaination below is somewhat outdated. Now, I recommends you to use go_router, a routing package using Flutter Navigation 2.0!

Intro

When I’m on a flutter web, I faced with routing issue. Both MaterialApp and GetMaterialApp had the same issues, which was routing acts weird when browser’s back button and refresh button are clicked. So I’ve tried some test project with flutter web and I found the solution. Now, it works just like native web project. I’d like to share this solution with you.

Flutter Navigation 2.0

There is this thing called Flutter Navigation 2.0 . I didn’t dig much about it, but to simply put, it’s navigation system is now more customizable with this Navigation 2.0.

Since the original routing system had so many problems in web platform, I had to try this one. And it worked, thankfully. You can use with MaterialApp.router instead of just MaterialApp . But if you do that you need to implement some override method which involves in navigation logic. Instead overriding each methods, I used GetMaterialApp.router which comes with default methods, and therefore, only extra thing to do is just build method.

Code Implementation

Install Getx

At this moment, I used below version of Getx package.



dependencies:
  ...
  get: ^4.6.1

Basic Routing Stuff

For convenience, I used simple routing path and getPages with snippet.



abstract class Routes {
  static const HOME = '/';
  static const LOGIN = '/login';
  static const SIGNUP = '/signup';
}




abstract class AppPages {
  static final pages = [
    GetPage(
      name: Routes.HOME,
      page: () => Home(),
    ),
    GetPage(
      name: Routes.LOGIN,
      page: () => Login(),
    ),
    GetPage(
      name: Routes.SIGNUP,
      page: () => Signup(),
    ),
  ];
}

Create `GetMaterialApp.router`

When you use GetMaterialApp.router instead of just GetMaterialApp , you don’t need to provide(and you can’t) initialRoute . But you need to provide getPages and routerDelegate fields with values.



import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(GetMaterialApp.router(
    debugShowCheckedModeBanner: false,
    defaultTransition: Transition.fade,
    getPages: AppPages.pages,
    routerDelegate: AppRouterDelegate(),
  ));
}

Create Sample Pages

For testing, I created some simple test pages with different background colors.

Note that when you navigate between pages, you need to use Get.rootDelegate instead of Get because we’re using routerDelegate to handle routing.



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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: TextButton(
        child: Text(
          'Home',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => Get.rootDelegate.toNamed(Routes.LOGIN),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      child: TextButton(
        child: Text(
          'Login',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => Get.rootDelegate.toNamed(Routes.SIGNUP),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: TextButton(
        child: Text(
          'Signup',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => Get.rootDelegate.toNamed(Routes.HOME),
      ),
    );
  }
}

Create router delegate with `GetDelegate`

So, this is the main part.

Create AppRouterDelegate or what ever you like to call with GetDelegate extended.
Override build method and return Navigator with onPopPage and pages .
- onPopPage → This is invoked when pop action happened, and return wheather pop is successful or not. If you don’t want to block pop action, just leave it there with default code.
- pages → This is different from getPages . This is more related to what page to show in current moment. I’m not fully figured out yet, but it’s also different from navigation history stack. So, in order to show the right page according to current url, I used currentConfiguration.currentPage . Note that this field can’t be empty since it related to current view. When currentConfiguration is null(which means first entered the page), you can just simply return initial page.




class AppRouterDelegate extends GetDelegate {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      onPopPage: (route, result) => route.didPop(result),
      pages: currentConfiguration != null
          ? [currentConfiguration!.currentPage!]
          : [GetNavConfig.fromRoute(Routes.HOME)!.currentPage!],
    );
  }
}

And plus, since you can write build method and other override method(if you want to customize login) you can easily add user authentication status check before navigate to any page.

Conclusion

I think Flutter Web has a long way to go, but I’m glad Flutter is keeping up there work! I hope this article can help those who struggles with Flutter Web routing issue.

Cheers!

Chrome Extension with Firebase : Manifest V3

swimmingkiim — Sun, 17 Apr 2022 03:27:02 +0000

Intro

Yesterday, I worked on chrome extension for my personal project. While doing that, I had some troubles regarding to the difference between Chrome Extension Manifest V2 and V3 in terms of using firebase in my extension.

Here, I’d like to share how I solved it.

Manifest V3 setting for Firebase



{
  "name": "Linkeeper Chrome Extension",
  "description": "Achieve current web link to Linkeeper fast",
  "version": "1.0",
  "manifest_version": 3,
  "host_permissions": [
    "<all_urls>"
  ],
  "background": {
    "service_worker": "serviceWorker/background.js"
  },
  "permissions": [
    "tabs",
    "scripting",
    "activeTab",
    "identity"
  ],
  "action": {
    "default_popup": "view/popup/popup.html",
    "default_icon": {
      ...
    }
  },
  "icons": {
        ...
  },
  "oauth2": {
    "client_id": "<Your Client Id>",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  },
  "key": "-----BEGIN PUBLIC KEY-----<Your Chrome Extension Public Key>-----END PUBLIC KEY-----"
}

There’re good article about forming your manifest.json in below link.

https://firebaseopensource.com/projects/firebase/quickstart-js/auth/chromextension/readme/

However, It’s somewhat outdated because now we have Manifest V3. When you write your manifest.json in V3 you need to be careful below fields.

host_permissions → it’s not included in above link’s example, but in V3 you include this
background → instead using page field inside background field, you need to use service_worker

Other than that, it’s just same.

Background service worker to use Firebase



// serviceWorker/background.js
try {
    // you need to manually have firebase-compat.js file in your dir
  self.importScripts('../firebase/firebase-compat.js');

  var config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  };
  firebase.initializeApp(config);

  var db = firebase.firestore();

  chrome.runtime.onMessage.addListener(function (request, sender) {
    if (request.command === "post") {
            // in here, you can use both firebase and data from popup view
      console.log(request.data);
            return true;
    }
  });
} catch (e) {
  console.error(e);
}

In background service worker file, you need to initialize your firebase. In order to to that you need to import firebase first. This was a bit tricky for me since you can’t use background.html script tag to import it or import directly from web url. The answer for Manifest V3 was just copy and paste the code in below link and manually include javascript file to your chrome extension folder.

https://www.gstatic.com/firebasejs/9.6.10/firebase-compat.js

Then, import that file in your service worker with self.importScripts .

Of course, you may want to interact with user interaction data with firebase. By using chrome.runtime.onMessage.addListenser in you service worker, and chrome.runtime.sendMessage in your view script can make that happen. In that way, you can access both user input data and firebase on your service worker file.



//view/popup/script.js

...

chrome.runtime.sendMessage({

        command: 'post', data: {

          ...

        }

      }, (response) => {

        console.log(response);

      }

    );

...

Conclusion

I think many of your web project will gain more attention when you add chrome extension. I hope that this article will help your journey.

Cheers!

Flutter : Drag & Drop Shapes in CustomPaint

swimmingkiim — Sun, 10 Apr 2022 12:37:39 +0000

Intro

In this post, I’d like to share how to implement user interactive Drag & Drop using Flutter CustomPaint Widget. There’s no packages need to be installed since we’re going to use only what flutter and dart offers us. So, let’s dive in!

1. StatefulWidget with shape object data



class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isDown = false;
  double x = 0.0;
  double y = 0.0;
  int? targetId;
  Map<int, Map<String, double>> pathList = {
    1: {"x": 100, "y": 100, "r": 50, "color": 0},
    2: {"x": 200, "y": 200, "r": 50, "color": 1},
    3: {"x": 300, "y": 300, "r": 50, "color": 2},
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(child: Text('dummy text'))
        );
  }
}

First, we need StatefulWidget to make reactive to user interaction.

isDown → true if user touch or click down
x, y → coordinate of user action contains
targetId → id of shape object that user is currently pointing at
pathList → shape data list that will be displayed in canvas. In this example, we only test with circle, so x and y of shape data will be the coordinate of center of circle, r is radius, color is index of a preset color list

2. Widgets to include



@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: GestureDetector(
          child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.grey,
              child: CustomPaint(
                foregroundPainter:
                    ShapePainter(down: isDown, x: x, y: y, pathList: pathList),
                size: Size(MediaQuery.of(context).size.width,
                    MediaQuery.of(context).size.height),
              )),
        ) // This trailing comma makes auto-formatting nicer for build methods.
        );
  }

Now, we need to fill up the widget tree.

GestureDetector → it should be wrap all widgets related to user interaction that we’re going to detect
CustomPaint → widget that provides canvas functionality
ShapePainter → performs paint and repaint

3. Capture user interaction



// util function
bool isInObject(Map<String, double> data, double dx, double dy) {
  Path _tempPath = Path()
    ..addOval(Rect.fromCircle(
        center: Offset(data['x']!, data['y']!), radius: data['r']!));
  return _tempPath.contains(Offset(dx, dy));
}
// event handler
void _down(DragStartDetails details) {
    setState(() {
      isDown = true;
      x = details.localPosition.dx;
      y = details.localPosition.dy;
    });
  }

  void _up() {
    setState(() {
      isDown = false;
      targetId = null;
    });
  }

  void _move(DragUpdateDetails details) {
    if (isDown) {
      setState(() {
        x += details.delta.dx;
        y += details.delta.dy;
        targetId ??= pathList.keys
            .firstWhereOrNull((_id) => isInObject(pathList[_id]!, x, y));
        if (targetId != null) {
          pathList = {
            ...pathList,
            targetId!: {...pathList[targetId!]!, 'x': x, 'y': y}
          };
        }
      });
    }
  }

// map event handler to pan event
...
body: GestureDetector(
          onPanStart: (details) {
            _down(details);
          },
          onPanEnd: (details) {
            _up();
          },
          onPanUpdate: (details) {
            _move(details);
          },
...

Next is registering event handlers. In GestureDetector pan event is for Drag & Drop.

onPanStart → set initial user action coordinate & set isDown to true
onPanUpdate → when isDown is true, update user action coordinate & find target item & update related states(targetId, pathList)
onPanEnd → set isDown to false

4. Draw using CustomPaint & CustomPainter



class ShapePainter extends CustomPainter {
  final colors = [Colors.red, Colors.yellow, Colors.lightBlue];
  Path path = Path();
  Paint _paint = Paint()
    ..color = Colors.red
    ..strokeWidth = 5
    ..strokeCap = StrokeCap.round;

  final bool down;
  final double x;
  final double y;
  Map<int, Map<String, double>> pathList;
  ShapePainter({
    required this.down,
    required this.x,
    required this.y,
    required this.pathList,
  });
  @override
  void paint(Canvas canvas, Size size) {
    for (var pathData in pathList.values) {
      _paint = _paint..color = colors[pathData['color']! as int];
      path = Path()
        ..addOval(Rect.fromCircle(
            center: Offset(pathData['x']!, pathData['y']!),
            radius: pathData['r']!));
      canvas.drawPath(path, _paint);
    }
  }

  @override
  bool shouldRepaint(ShapePainter oldDelegate) => down;
}

ShapePainter is the one who owns paint method. There’re not much logic, just drawing the data what upper widget gave it. Note that shouldRepaint is always called when user touch or mouse is down, so that update can be done only when user is in action.

Conclusion

I’m really interested in canvas in general. I hope this can help those who want to implement Drag & Drop using Flutter CustomPainter.

Cheers!

Brief Summary : Dart Variable

swimmingkiim — Sat, 02 Apr 2022 05:29:28 +0000

This post may helpful for those who need quick remind of Dart grammar, or a programmer from a different language learning Dart.

Basic

Variables store references.

var

var language = 'dart';

Mutable variable keyword

By Type

String language = 'dart';

You can specify the type in order to declare variable.

final & const

final fruits = {
    1: 'apple',
    2: 'orange'
};
const animals = {
    1: 'dog',
    2: 'cat'
};

fruits[1] = 'banana'; // NO ERROR
animals[1] = 'monkey'; // ERROR

There’re similar in sense that they can’t be changed once you assign a value to them.

The Difference Between “final” and “const” keyword

final can’t be changed once you assign a value.
const is also like that, but in advance, they require more rules
- The value that you’re going to assign should be a compile-time constant
  - compile-time constant means a constant value that is already fixed by the time when dart compile process.
  - For example, String literals that dose not contain interpolated expression and expression must be one of these(null, numeric, string, or boolean)
Also, after assigning a value, variables annotated with final can’t be reassigned, but it’s fields can.
Unlike final, variables annotated with const can’t be reassigned, both itself ant it’s sub fields.

late

late String onlyKnowAfterInitialization;

onlyKnowAfterInitialization = 'hello world';

Keyword that’s used in below cases.
- You need to assign a value after you declare it.
- You want to use lazy assignment.
  - For example, when you need to access this in order to assign a value.
If the value of a variable annotated with late keyword needs to be computed, the computation will not happen unless the variable is actually used in somewhere.

Cheers!

Forem: swimmingkiim

I ran 2,178 simulations on an autonomous AI economy to find how to prevent systemic collapse

I made a Free UI template with Free Figma Design (feat. Messenger App, Flutter)

Screenshots

Walkthrough

Walkthrough - Phone Number

Walkthrough - Pin Number

Walkthrough - Profile Account

Contact

Chats

More

Chat

What is .metadata file in Flutter Project?

Intro

Definition of .metadata file in a Flutter project

Should you add this to .gitignore file?

Reason 1 : Comment inside .metadata file

Reason 2 : Other references also doesn't include .metadata file in .gitignore file

References of .gitignore that doesn't include .metadata

Why some Flutter project have .metadata file, and some does not?

.metadata file is created when you run flutter create command

Where this .metadata file used in Flutter Project?

This file tracks properties of this Flutter project.

Used by Flutter tool to assess capabilities and perform upgrades etc.

This file should be version controlled.

Tracks metadata for the flutter migrate command

Is .metadata file is necessary for build Flutter project?

What if I want to create or update .metadata file?

Conclusion

Create Svelte + Typescript + tailwindcss Project(feat. error solved)

Intro

Step 1 : Create project with vite

Step 2 : Solve tailwindcss error

Error log

Solution

Step 3 : Check default code is running ok

How to migrate Firestore schema

Intro

What I’ve used

Github repository for source code

How to use this Dart application

1. Create service account json file

2. flutter pub get

3. Write your migration code

4. Run it

Conclusion

React Image Editor like Figma or Canva

Project Link

Share your references with co-workers easily

What Linkeeper can do for you

Save Link privately with your Inbox

Add a Link

OR, save it via Chrome Extension

Link created!

You can filter them by a tag

OR (nested) tags

Organize links by projects

Copy your shareable project link

Done! Now, send to your co-workers!

Try Linkeeper

Flutter - Test Firestore

Intro

Setup

Write TestRepository using Firestore

Create test_repository_test.dart

Write test content using FakeFirestore

Conclusion

Flutter Web - Fix Refresh & Back button Problem

Update Notice!!!

Intro

Flutter Navigation 2.0

Code Implementation

Install Getx

Basic Routing Stuff

Create GetMaterialApp.router

Create Sample Pages

Create router delegate with GetDelegate

Conclusion

Chrome Extension with Firebase : Manifest V3

Intro

Should you add this to `.gitignore` file?

Reason 1 : Comment inside `.metadata` file

Reason 2 : Other references also doesn't include `.metadata` file in `.gitignore` file

References of `.gitignore` that doesn't include `.metadata`

Why some Flutter project have `.metadata` file, and some does not?

`.metadata` file is created when you run `flutter create` command

Where this `.metadata` file used in Flutter Project?

Is `.metadata` file is necessary for build Flutter project?

What if I want to create or update `.metadata` file?

2. `flutter pub get`

Write `TestRepository` using Firestore

Create `test_repository_test.dart`

Write test content using `FakeFirestore`

Create `GetMaterialApp.router`

Create router delegate with `GetDelegate`