DEV Community: victor

Contributing to #hackoberfest as a Flutter Developer 💙💙💙

victor — Mon, 03 Oct 2022 08:52:14 +0000

So Hackoberfest is now in full swing and began on September 29, 2022, and will last throughout the entire month of October. In essence, hackoberfest is a month-long event where developers can get involved with the Open Source project and receive recognition for their work.

How to participate.

It's very simple to sign up and begin participating in the Hackoberfest challenge.

1. Read the Guidelines

Every contributor to Hackoberfest must abide by the rules and requirements in order for their contribution to be recognized or to avoid being flagged off. The rules were developed to prevent contributors from spamming, and they are very simple to follow. participation rules

2. Signup to participate

You must sign up at Signup in order to participate in the Hacktober challenge. In order for your contributions to be easily recognized and for you to access the to open source projects

3. start contributing 💃💃💃

You can now begin contributing to any of the participating github or gitlap repositories.
PRs that are in a repository with the hacktoberfest topic and have been merged, accepted by a maintainer, or marked as hacktoberfest-accepted will count toward your participation.
Make a PR request before October 31st to qualify for an incredible reward.

Contrubuting as flutter developer

This year's Hackotberfest is particularly noteworthy for us Flutter developers as a result of the collaboration between guys at Invertase and the Flutter community to organize an exciting month for Flutter and Dart developers worldwide.

And it's incredibly simple to participate in the special edition for flutter developers; all you need to do is sign up on Invertase.io (https://invertase.io/community/hacktoberfest). and you gain entry to View the program's list of available eligible issues.

Reqirement for a succesfull Pr

Successful Hacktoberfest Pull Requests
Mentions issues with the hacktoberfest and/or hacktoberfest-special tag
Merged and tagged with hacktoberfest-accepted Submitted between 29th September and 31st October Meaningful, adds value, and contribute to the success of the repository
Avoid spamming! You will be blocked from the program if you repeat this!
Do not send small tweak PR for a repository such as fixing typos!
Passes all CI checks and is approved and merged by a maintainer

Rewards 🎁

In addition to the fantastic prize you receive for participating in the hackotoberfest, the guys at Invertase have a special prize for those who participate in the flutter edition.
💙 Dash
💙 Zappy
💙 Google Home
💙 FlutterVikings goodies
💙 Cool stickers box
check out the special prize

So what are you waiting for start hacking your way into the month hackotoberfest 👍.

Getting started with Supabase.io(firebase Alt) on flutter

victor — Sun, 07 Nov 2021 19:42:16 +0000

Supabase.io is an open-source backend as a service(BASS) that allows seamless integration of backend services into your application without the need for complex structure. supabase.io is a fast-growing alternative to Firebase and they have similar features which include database service, authentication service, storage service, and coming soon cloud functions.
Supabase.io has seamless integration with flutter application with fast integration of its core features. So in this article, we'll work through how to set up supabase.io in your flutter project.

Getting started

firstly we have to create a new project in app.supabase.io then enter the project details and wait for the project to launch.
Next, we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor.

Go to the "SQL" section.
Click "User Management Starter".
Click "Run".

Then you've created some database tables, you are ready to insert data using the auto-generated API. We just need to get the URL and anon key from the API settings.

Go to the "Settings" section.
Click "API" in the sidebar.
Find your API URL on this page.
Find your "anon" key on this page.

Note: your API URL and "anon" key would use when initializing supabase inside your project.

Setting Your App.

After creating your fultter app, you will have to install the supabase_flutter dependency,
Run the following command in your terminal to get the newest version of supabase_flutter to your project.

flutter pub add supabase_flutter

Then run

flutter pub get

to install the dependencies.

Now that we have the dependencies installed let's set up deep links so users who have logged in via magic link or OAuth can come back to the app.

Go to the "Authentication" section.
Click "Settings" in the sidebar.
Type io.supabase.flutterquickstart://login-callback/ in the Additional Redirect URLs input field.
Hit save.

This happened in the supabase end now we also have to add for android and ios.
For android: locate your AndroidManifest.xml file in android/app/src/main/AndroidManifest.xml to add an intent-filter to enable deep linking

<manifest ...>
  <!-- ... other tags -->
  <application ...>
    <activity ...>
      <!-- ... other tags -->

      <!-- Add this intent-filter for Deep Links -->
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
        <data
          android:scheme="io.supabase.flutterquickstart"
          android:host="login-callback" />
      </intent-filter>

    </activity>
  </application>
</manifest>

For Ios: add CFBundleURLTypes to enable deep linking in ios/Runner/Info.plis

<!-- ... other tags -->
<plist>
<dict>
  <!-- ... other tags -->

  <!-- Add this array for Deep Links -->
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>io.supabase.flutterquickstart</string>
      </array>
    </dict>
  </array>
  <!-- ... other tags -->
</dict>
</plist>

After the deep linking, we have to initialize supabase before ranApp() in main.dart to enable use it in our project.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: '[YOUR_SUPABASE_URL]',
    anonKey: '[YOUR_SUPABASE_ANON_KEY]',
  );
  runApp(MyApp());
}

With this, you are all set to start building your project with supabase.io. so the next step is to set up the authentication with supabase.

Step-by-step Guide On Setting Up AWS Amplify On Flutter

victor — Mon, 05 Jul 2021 15:17:34 +0000

AWS amplify is a BAAS (Back-End As A Service) which is part of the AWS family.
Aws Amplify provided backend services such as firebase:

Getting started with AWS for beginners is quite confusing, so we would try to make it as simple as possible.

Getting Started

Install the amplfly cli:

npm install -g @aws-amplify/cli

When that is completed, you then set up the Amplify CLI. Configure Amplify by running the following command:

amplify configure

amplify configure would require you to sign into the AWS Console if you have an existing account or create a new one.
once signed in Amplify CLI will require you to create a user to AWS Identity and Access Management (IAM). From your account

Navigate to the IAM Portal and select ‘Add User’. Make sure you have selected the proper region (top right).

You will be guided through a series of steps to create your user.
Remember to store both the ACCESS KEY ID and SECRET ACCESS KEY they would come in handy while setting up your project.

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

Setting up the project

Create a new flutter project on android studio after setting up open pubspec.yaml and add the following 3 dependencies below the line “SDK:flutter”.

  amplify_flutter: ^0.2.0
  amplify_auth_cognito: ^0.2.0
  amplify_analytics_pinpoint: ^0.2.0

sync your project with your new configuration, run:

flutter pub get

Then initialized Amplify

amplify init

Enter the following when prompted:

? Enter a name for the environment
    `dev`
? Choose your default editor:
    `IntelliJ IDEA`
? Choose the type of app that you're building: 
    'flutter'
? Where do you want to store your configuration file? 
    ./lib/
? Do you want to use an AWS profile?
    `Yes`
? Please choose the profile you want to use
    `default`

This is a one-time initialization process to create an Amplify-supported application. This command helps you to choose which AWS profile is to be used to allocate all the AWS resources and select the framework language(Javascript, Flutter, Java, Swift) corresponding to the project. Amplify init creates a parent CloudFormation template in an S3 bucket which will contain a nested CloudFormation template for when other AWS resources are added. The same S3 bucket also contains Lambda zip files and AppSync schema and resolver files. amplify/directory is created upon successful completion of the amplify init command which contains all necessary metadata files.

Before using any methods in the Amplify Flutter Library, it’s important to add all the necessary plugins and to call configure once in your app.

// Amplify Flutter Packages
import 'package:amplify_flutter/amplify.dart';
import 'package:amplify_analytics_pinpoint/amplify_analytics_pinpoint.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';

// Generated in previous step 
import 'amplifyconfiguration.dart';

Add the following code to your application’s root Stateful Widget


class _MyHomePageState extends State<MyHomePage> {

  @override
  initState() {
    super.initState(); 
    _configureAmplify(); 
  }

  void _configureAmplify() async {

    // Add Pinpoint and Cognito Plugins, or any other plugins you want to use
    AmplifyAnalyticsPinpoint analyticsPlugin = AmplifyAnalyticsPinpoint();
    AmplifyAuthCognito authPlugin = AmplifyAuthCognito();
    await Amplify.addPlugins([authPlugin, analyticsPlugin]);

    // Once Plugins are added, configure Amplify
    // Note: Amplify can only be configured once.
    try {
      await Amplify.configure(amplifyconfig);
    } on AmplifyAlreadyConfiguredException {
      print("Tried to reconfigure Amplify; this can occur when your app restarts on Android.");
    }
  }

  // customize the rest of your Widget below as you wish...

Notice the Addplugin method was called before the Amplify.configuration()

Congratulation, we have just concluded setting your first flutter project with Aws Amplify.
Moving forward, in the next part of this series, we will be adding AWS Cognito to our project to enable a nice user sign-up/sign-in.

Full Page scroll views in flutter(TikTok effect)

victor — Sun, 20 Jun 2021 12:38:27 +0000

You must have seen that the Ui flow between "Tiktok" and Instagram reel are similar, both of them have the full-page scroll view effect based on user swipe.

So we are going to write code for a basic component app with a full-page scroll view on display.

Firstly we declare a page controller that would handle the state for our pageview widget.



PageController controller =PageController(initialPage: 0);

We declared the page view widget with a vertical scroll direction and created a list of pages which we would be scrolling through as children.



PageView(
          controller: controller,
          scrollDirection: Axis.vertical,
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.blue,
              child: Center(child: Text('page 1'),),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.red,
              child: Center(child: Text('page 2'),),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.yellow,
              child: Center(child: Text('page 3'),),
            ),

          ],
        ),

That is all, this is a building block for an app like TikTok and Instagram where another component would be added on top.

Github

Top BAAS (Backend as a service) for flutter 💙 💙 💙

victor — Thu, 13 May 2021 21:48:01 +0000

Backend as a service (BaaS) is a cloud model that helps developers automate backend development functions and achieve hassle-free cloud infrastructure management. A BaaS service provider is responsible for running servers and performing maintenance.

BaaS gives developers several tools to help them create backend code and accelerate development. Some of the features of BaaS include APIs, file storage, data management, and push notifications.

Benefits

Scalable
Hassle-free
Time-saving
More flexible

1. Firebase

Firebase is a well-known backend platform powered by Google. It has lots of features that enhance the process of web and mobile app development. Firebase is well known for its robust NoSQL database that uses the JSON protocol for data storage actions.

Features

Realtime Database
Hosting
Machine Learning
Analytics
APIs

Pricing

Start for free
Scale under a pay as you go model

Get started with Firebase on Flutter

2. parseplatform

Parse is an open-source framework for creating application backends with support for many frontend development technologies, including Swift, React Native, Ionic, Java, and Xamarin. Parse can be used to develop mobile, IoT, and web apps.

Features

Spreadsheet like database
APIs (REST and GraphQL)
Push-Notifications
Social Login
Automatic emails

Price

Free tier available
Paid plans under Pay as you go

Get started with parse on Flutter

3. AWS Amplify

AWS Amplify another accessible cloud BaaS platform. It is among the most widely-used platforms today.

AWS Amplify offers secure and agile offerings for its global user base. Users can experience fast access to their resources and advanced functionality with this backend service.

Features

Authentication
GraphQL and REST APIs
Datastore
Analytics
Notifications

Price

Free tier available
Paid plans under Pay as you go

Get started with AWS Amplify on Flutter

4.Appwrite

Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

Features

Database
Storage
Authentication
Functions
Console

Get started with Appwrite on Flutter

Awesome plugins for android studio😎

victor — Wed, 21 Aug 2019 00:54:36 +0000

You can go ahead and start coding on a clean installation of Android Studio with just the necessary libraries installed and zero plugins added. But having Android Studio plugins installed makes your work more efficient, stress free, intelligent, and (when possible) fun😜. so let make a plunge!

1. Codota

Codota completes lines of code based on millions of open source Java programs and your context helping you code faster with fewer errors. With features such as:

Full line AI autocomplete
In line and relevant code examples
Code suggestions based on your own coding practices

2. String Manipulation

String Manipulation is used in manipulating strings. Perform a variety of different tasks on strings such as converting to camelCase, kebab-lowercase, KEBAB-UPPERCASE, snake_case, SCREAMING_SNAKE_CASE, dot.case, words lowercase, First word capitalized, escaping string in Java, and more.

3. Maven Helper

Maven Helper is a must-have plugin for working with Maven.
Provides:

easy way for analyzing and excluding conflicting dependencies
actions to run/debug maven goals for a module that contains the current file or on the root module
action to open terminal at the current maven module path
actions to run/debug the current test file.

4. Butterknife

butterknife Most useful plug-in for Android Studio/IDEA that allows one-click creation of Butterknife view injections. In addition to injections this can even generate click methods for you!

5. CodeGlance

CodeGlance Embeds a code minimap similar to the one found in Sublime into the editor pane. Works with both light and dark themes using your customized colors for syntax highlighting.

6. ADB Idea

ADB Idea is plugin for Android Studio and Intellij IDEA that speeds up your day to day android development.
The following commands are provided:

Uninstall App
Kill App
Start App
Restart App
Clear App Data
Clear App Data and Restart and lot more.

7. ADB wifi

ADB wifi Android Studio plugin for debug android app over Wi-Fi.

8. DTO generator

DTO generator Data Transfer Object generator creates Java classes from a given feed. You can paste the JSON response directly to generate a corresponding POJO for it. Check out the github repository for it.

9. Material Design Icon Generator

Material Design Icon Generator
This plugin help you to set material design icon in your app resources.

10. Android Drawable Importer

Android Drawable Importer powerhouse for adding images to your project. You can easily import an icon from Material Icons or Android Icons, set a format, size, color and multiple dimensions. You can also import a regular image and automatically resize it for target densities.

Bonus

Power Mode II
Power Mode II Based on the activate-power-mode atom plugin. have fun while coding with animated Exploding falling sparks effect.

Thanks for making it all the way down! these are just few of the available plugins for Android Studio. So, if we left out your favorite plugin please let us know in the comments below. Happy coding👨‍💻👨‍💻!

Anonymous Auth with Firebase on Android

victor — Wed, 14 Aug 2019 10:04:10 +0000

When working with firebase Authentication, temporary anonymous accounts can be created to authenticate with Firebase for a user not signed up to your app to store and work with data protected by security rules. In the event that the anonymous user decides to sign up to your app, you can interface their sign-in accreditations so they can keep on working with their ensured information in future sessions.

installation

Add Firebase to your android project If you haven't already
Add the dependency for the Firebase Authentication Android library to your module (app-level) Gradle file (usually app/build.gradle):

implementation 'com.google.firebase:firebase-auth:18.1.0'

connect your app to your Firebase project, do so from the Firebase console.
Enable anonymous auth: In the Firebase console, open the Auth section. On the Sign-in Methods page, enable the >Anonymous sign-in method.

Usage

In your activity's onCreate method, get the shared instance of the FirebaseAuth object:

private FirebaseAuth mAuth;
// ...
// Initialize Firebase Auth
mAuth = FirebaseAuth.getInstance();

When initializing your Activity, check to see if the user is currently signed in:

@Override
public void onStart() {
    super.onStart();
    // Check if user is signed in (non-null) and update UI accordingly.
    FirebaseUser currentUser = mAuth.getCurrentUser();
    updateUI(currentUser);
}

call signInAnonymously to sign in as an anonymous user:

mAuth.signInAnonymously()
        .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
            @Override
            public void onComplete(@NonNull Task<AuthResult> task) {
                if (task.isSuccessful()) {
                    // Sign in success, update UI with the signed-in users information
                    Log.d(TAG, "signInAnonymously:success");
                    FirebaseUser user = mAuth.getCurrentUser();
                    updateUI(user);
                } else {
                    // If sign in fails, display a message to the user.
                    Log.w(TAG, "signInAnonymously:failure", task.getException());
                    Toast.makeText(AnonymousAuthActivity.this, "Authentication failed.",
                            Toast.LENGTH_SHORT).show();
                    updateUI(null);
                }

                // ...
            }
        });

use getCurrentUser method to get account data for the signed in user

migrate an anonymous account to a permanent account

When the user signs up, complete the sign-in flow for the user's authentication provider up to, but not including, calling one of the FirebaseAuth.signInWith methods.
Get an AuthCredential for the new authentication provider:
Email and password

AuthCredential credential = EmailAuthProvider.getCredential(email, password);

Pass the AuthCredential object to the sign-in user's linkWithCredential method

mAuth.getCurrentUser().linkWithCredential(credential)
        .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
            @Override
            public void onComplete(@NonNull Task<AuthResult> task) {
                if (task.isSuccessful()) {
                    Log.d(TAG, "linkWithCredential:success");
                    FirebaseUser user = task.getResult().getUser();
                    updateUI(user);
                } else {
                    Log.w(TAG, "linkWithCredential:failure", task.getException());
                    Toast.makeText(AnonymousAuthActivity.this, "Authentication failed.",
                            Toast.LENGTH_SHORT).show();
                    updateUI(null);
                }

                // ...
            }
        });

if linkWithCredential method call was successfull, the anonymous account data will be maigrated to the new user