DEV Community: Dipen Maharjan

Projects Sections in My Website

Dipen Maharjan — Sat, 01 Apr 2023 12:29:50 +0000

Hello friends, I have now added a projects sections on my personal website. It contains the list of projects that I have contributed. I hope to add more projects after completing it in few months. I've been working as a freelancer for past 3-4 months and it's been a hell of a journey.

Website Link: https://dipenmaharjan.com.np/
Follow me on Twitter: https://twitter.com/slimpotatoboy

Slack Logger to Log your debug issues

Dipen Maharjan — Sun, 19 Mar 2023 17:19:49 +0000

Mobile application development is a complex process that requires constant debugging and monitoring. Logging is an essential part of this process, as it allows developers to understand the flow of the application and debug issues. Slack logger is a package that allows developers to send logs to a Slack channel, making it easier to keep track of logs and collaborate with team members. In this blog, we will explore the Slack Logger package for Flutter and its features.

Overview of Slack Logger:
Slack Logger is an open-source package for Flutter that allows developers to send logs to a Slack channel. It is a simple and easy-to-use package that can be integrated into any Flutter project. The package uses the Slack API to send logs to a Slack channel.

Features of Slack Logger:
Slack Logger has several features that make it an essential tool for Flutter developers. Some of the key features of Slack Logger are:

Easy integration: Slack Logger can be easily integrated into any Flutter project. The package is available on pub.dev and can be installed using pub.
Customizable: Slack Logger allows developers to customize the log message format and the Slack channel to which logs are sent.
Exception logging: Slack Logger can log exceptions in addition to regular log messages. When an exception occurs, Slack Logger can send the exception details to a Slack channel, making it easier to debug issues.

Steps before using this package:

Add Apps to 🔗 https://api.slack.com/apps/.
Go to Incoming Webhook Link and Enable it.
Create your slack channel.
Create new webhook and link slack channel.

How to use Slack Logger:
Using Slack Logger in your Flutter project is easy. First, you need to add the package to your pubspec.yaml file:

dependencies:
  slack_logger: ^1.0.5

Once the package is added to your pubspec.yaml file, you can import it into your Dart code and configure it:

import 'package:slack_logger/slack_logger.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    SlackLogger(webhookUrl: "[Add Your Web Hook Url]");

    return MaterialApp(
      ...
    );
  }
}

Create Instance of SlackLogger:

final slack = SlackLogger.instance;

Send Message:

…
slack.send("This is a error log to my channel");
…

Send Image:

...

slack.sendImage(
  imageUrl: "[image url]",
  imageAltText: "[alt text for image]",
);

...

Conclusion:
Slack Logger is a powerful package for Flutter developers that allows them to send logs to a Slack channel. With its customizable log message format, level-based logging, and exception logging, Slack Logger is an essential tool for mobile application development. Whether you are debugging issues or collaborating with team members, Slack Logger makes it easy to keep track of logs and stay on top of your flutter development.
Pub Dev: https://pub.dev/packages/slack_logger
Github: https://github.com/slimpotatoboy/slack_logger

🚀 Contributors
Dipen Maharjan
Ashim Upadhaya

How to setup Flutter for App Development?

Dipen Maharjan — Tue, 14 Feb 2023 16:55:52 +0000

Flutter is an open-source mobile application development framework created by Google. It is used to develop high-performance mobile applications for iOS and Android, as well as web and desktop applications. Flutter is built on top of the Dart programming language and provides a rich set of features and tools to help developers build beautiful and engaging applications.
If you are new to Flutter and want to get started with mobile app development, this blog will guide you through the process of setting up a Flutter development environment on your computer.

System Requirements

Before you start the installation process, ensure that your computer meets the following system requirements:
Operating System: Windows 7 or later, macOS (64-bit) 10.14 or later, or Linux (64-bit)
Disk Space: 2.8 GB (for the Flutter SDK and its dependencies)
RAM: 4 GB or higher
Graphics Card: Intel HD Graphics 4000 or higher (or equivalent graphics card from AMD or NVIDIA)

Install Flutter SDK

The first step is to download the Flutter SDK, which includes the Flutter framework, Dart programming language, and other essential tools. Follow these steps to download the Flutter SDK:
Go to the Flutter website at https://flutter.dev/docs/get-started/install and select your operating system.
Follow the installation instructions for your operating system.
After the installation is complete, open your terminal or command prompt and run the command flutter doctor to check that the installation was successful.

Install Android Studio or Visual Studio Code

Flutter can be used with various code editors, including Android Studio and Visual Studio Code. These editors provide a rich set of features, such as code completion, debugging, and more, to help you develop your Flutter apps. Here's how to install Android Studio or Visual Studio Code:
Android Studio: Download Android Studio from the official website at https://developer.android.com/studio. Follow the installation instructions for your operating system.
Visual Studio Code: Download Visual Studio Code from the official website at https://code.visualstudio.com/. Follow the installation instructions for your operating system.

Set up an emulator or device

To test your Flutter apps, you will need to set up an emulator or device. An emulator is a software that simulates a mobile device, while a physical device is an actual mobile device that you can connect to your computer. Here's how to set up an emulator or device:
Emulator: Open Android Studio and select "AVD Manager" from the "Configure" menu. Follow the instructions to create a new emulator.
Physical device: Connect your device to your computer using a USB cable. Follow the instructions to enable developer mode and USB debugging on your device.

Create your first Flutter app

Now that you have set up your development environment, it's time to create your first Flutter app. Follow these steps to create a new Flutter app:
Open your code editor (Android Studio or Visual Studio Code) and create a new Flutter project.
Run the app on your emulator or physical device.
Edit the code and see the changes in real-time using Flutter's hot reload feature.

Congratulations! You have successfully set up a Flutter development environment and created your first Flutter app.
In conclusion, setting up a Flutter development environment is a straightforward process that requires downloading the Flutter SDK, installing a code editor, and setting up an emulator or device. With the Flutter framework and its rich set of features, you can develop high-performance, beautiful mobile apps for iOS and Android in no time.

Thank You!

If you haven’t watched my first youtube video:
Click here to watch

Logging your error message of your Flutter App directly into Slack Channel?

Dipen Maharjan — Mon, 07 Nov 2022 11:15:56 +0000

Wanna know how to log your error message in #flutter to your slack channel ?

Create new App in Slack

Go to https://api.slack.com/apps and create a new app.

Select from scratch option and in next option
Pick your appname and pick your workspace to send messages.

Enable Incoming Webhooks
After that, you need to enable incoming webhooks. and you will get the webhook url.
Now create your flutter project or in your exisiting project
In your terminal add this package slack_logger:

flutter pub add slack_logger

now in your main.dart file

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    SlackLogger(webhookUrl: "[Add Your Web Hook Url]");

    return MaterialApp(
      ...
    );
  }
}

now in your class:

final SlackLogger _slack = SlackLogger.instance;

and in your try catch:

try {
  ...
} catch (e) {
  _slack.send(e.toString());
}

Now when you get your error, you'll recieve the slack message in your selected channel.
Package Url : https://pub.dev/packages/slack_logger/
Github Url: https://github.com/slimpotatoboy/slack_logger
Feel Free to request any missing features or report issues here.

Top 5 Flutter Packages that you need to add to your Flutter Project RIGHT NOW.

Dipen Maharjan — Fri, 04 Nov 2022 13:43:48 +0000

1. Shared Preferences

url: https://pub.dev/packages/shared_preferences

Shared preferences is a no-brainer plugin for flutter developers. This plugin are mostly used for saving simple data like tokens, usernames. It is simple to use shared preferences and can store multiple data types.

To Write the data to shared preferences

// Obtain shared preferences.
final prefs = await SharedPreferences.getInstance();
// the first parameter is called key and second parameter is its value
// to save integer
await prefs.setInt('counter', 10);
// to save boolean
await prefs.setBool('value', true);
// to save double
await prefs.setDouble('decimal', 1.5);
// to save string
await prefs.setString('action', 'Start');
// to save list of strings
await prefs.setStringList('list', <String>['Earth', 'Moon', 'Sun']);

To Read the data to shared preferences

// Try reading data from the 'counter' key. If it doesn't exist, returns null.
final int? counter = prefs.getInt('counter');
// same goes to all the other data types

To remove entry

// Remove data for the 'counter' key.
final success = await prefs.remove('counter');

2. Http

url: https://pub.dev/packages/http

Http package is used for making HTTP request to the api. There are many other packages to call the api but this is the official and easiest way to call the api. I use this package in all of my projects.

Usage:

// import the package
import 'package:http/http.dart' as http;
// call the url 
var url = Uri.https('example.com', 'whatsit/create');
// get the response
var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
// get the response status code and body
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');

3. Go Router

url: https://pub.dev/packages/go_router

Go Router is a declarative routing package for flutter. This mean it is a url-based navigation. It is very easy to use and better for the navigation rather than the old method.

Usage:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() => runApp(App());
class App extends StatelessWidget {
  App({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
      title: 'GoRouter Example',
    );
  }
final GoRouter _router = GoRouter(
    routes: <GoRoute>[
      GoRoute(
        path: '/',
        builder: (BuildContext context, GoRouterState state) {
          return ScreenA();
        },
      ),
      GoRoute(
        path: '/page1',
        builder: (BuildContext context, GoRouterState state) {
          return ScreenB();
        },
      ),
    ],
  );
}

4. Google Fonts

url: https://pub.dev/packages/google_fonts

Do you need to use different fonts in your app? Google fonts is the one package for you. It uses the fonts from fonts.google.com where you can check the fonts and try it out there before using in your app. Google fonts contains more than 1400 fonts and you can use any of those in your app right away.

Usage:

import 'package:google_fonts/google_fonts.dart';
// using with default textstyle
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),
// load font dynamically
Text(
  'This is Google Fonts',
  style: GoogleFonts.getFont('Lato'),
),
// using with exisiting text style
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(textStyle: Theme.of(context).textTheme.headline4),
),
// override the fontSize, fontWeight, fontstyle
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.headline4,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

but I prefer to use it on textTheme in main.dart which is very easy.

go to your material app theme section and add this

theme: ThemeData(
  fontFamily: "Lato",
  textTheme: GoogleFonts.latoTextTheme(),
),

5. Cached Network Image

url: https://pub.dev/packages/cached_network_image

Cache Network Image is the most useful image package which is used to show dynamic images from internet asap in your app.

Usage:

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

Thank You!

If you haven’t watched my first youtube video:
Click here to watch

Do subscribe and like the video. THANK YOU!

Ecommerce App | Home Page UI - Flutter Speed Code

Dipen Maharjan — Fri, 04 Nov 2022 10:49:11 +0000

A flutter ecommerce app home page UI project.

Clean Flutter Ecommerce Home Page App Design.

Do watch the video of flutter speed code in link down below.

https://www.youtube.com/watch?v=XwBv0Cb648I

► Figma Design Reference
www.figma.com/file/GmfAihpI80eARQF9KY0hOF/Ecommerce-App-UI-Kit-(Community)?node-id=0%3A1

► Social Media
Instagram
Twitter
Website

GITHUB down - Problem with GITHUB - PUSH ??

Dipen Maharjan — Thu, 17 Mar 2022 15:18:12 +0000

CHECK STATUS

INTERNAL SERVER ERROR
 ! [remote rejected] master -> master (Internal Server Error)

Create Drawer With Title Header in Flutter

Dipen Maharjan — Sun, 13 Mar 2022 17:08:35 +0000

Create Scaffold

At home class, create a scaffold widget and inside that widget add drawer.

Scaffold(
    drawer: const CustomDrawer(),
    body: ....
)

Create CustomDrawer

...
Widget build(BuildContext context) {
    return Drawer(
        child: ListView(
            children: [
                SizedBox(height: 80, child: 
                    child: DrawerHeader(
                        child: Image.network("url", fit: BoxFit.contain),
                    ),
                ),
                ListTile(
                    onTap: () {}
                    horizontalTitleGap: 0.0,
                    leading: Icon(Icons.add, color: Colors.black, height: 16),
                    title: Text("Add New", style: TextStyle(color: Colors.black),),
                ),
                const Divider(
                    height: 1,
                    thickness: 1,
                ),
                 const Padding(
                     padding: EdgeInsets.all(16.0),                 
                     child: Text('Header'),
                 ),
                ListTile(
                    onTap: () {}
                    horizontalTitleGap: 0.0,
                    leading: Icon(Icons.add, color: Colors.black, height: 16),
                    title: Text("Add New", style: TextStyle(color: Colors.black),),
                ),
            ]
        ),
    );
}
...

Follow me @slimpotatoboy : Twitter, Instagram

How to create QR Code Scanner in Flutter?

Dipen Maharjan — Wed, 09 Mar 2022 17:20:56 +0000

In this post, we'll be using package barcode_scan2: ^4.2.0 to scan the QR Code.

Add Package to the Pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  barcode_scan2: ^4.2.0

Allow Access to Camera in Android and IOS

To use the QR Scanner, we have to allow the app to access the camera phone so at first we'll add the code to Android and IOS Folder,

go to:

path: android/app/src/main/AndroidManifest.xml

and Add this line of code before application

...
<uses-permission android:name="android.permission.CAMERA" />
<application ...

and Save.

Incase you get the multidex error
please add

path: android/app/src/build.gradle
---------------
defaultConfig {
  ....
  multiDexEnabled true
}

...
...
...

dependencies {
    implementation 'com.android.support:multidex:1.0.3'
}

Now Moving on to the IOS Part

path: ios/Runner/Info.plist

add these code

<dict>
    <key>NSCameraUsageDescription</key>
    <string>Camera permission is required for barcode scanning.</string>
</dict>

Create QR Code Dart

Once you have done that, now create a QRScannerScreen.dart file and add a button in the container or center

TextButton(
    child: Text("Scan Now"),
    onPressed: (){
        var result = await BarcodeScanner.scan(); //barcode scanner         
        print(result.type);  // The result type (barcode, cancelled, failed)
        print(result.rawContent); // The barcode content
        print(result.format); // The barcode format (as enum)
        print(result.formatNote);
    }
)

Use Barcode: BarCode Scan 2

Tools I use daily to code!

Dipen Maharjan — Mon, 07 Mar 2022 14:12:49 +0000

1. VS Code - For code editing of Flutter, 
react, html, css, php and many more

2. Clock - To manage time for coding and break set timer

3. Terminal - command line for everything

4. Notion and google sheet - to make daily task and 
Scrum also list out problems and questionaries

5. Google - finally google - ( Teacher ) Ask anything 
you don't know, you'll get the answers to 
all of your questions.

How to send data query to the route in NEXT.Js

Dipen Maharjan — Sun, 06 Mar 2022 18:12:14 +0000

It's very simple to pass the data query to the route in NExt.js

At first you need to initialize it:

const router = useRouter();

and import from next/router

import { useRouter } from "next/router";

Then you can use it like:

router.push({
 pathname: "/list",
 query: { search: "support" },
});

The following code results to:

http://localhost:3000/list?search=support

Pass multiple queries

router.push({
 pathname: "/list",
 query: { search: "support", limit: 10 },
});

This results to:

http://localhost:3000/list?search=support&limit=10

You can pass multiple parameters as well might be integer, string, boolean.

you can pass dynamic data as well.

Dynamic pass route

var searchData = "elonmusk";
var limitData = 15; 
router.push({
 pathname: "/list",
 query: { search: searchData, limit: limitData },
});

This results to:

http://localhost:3000/list?search=elonmusk&limit=15

Follow me @slimpotatoboy at twitter

How to use PAGINATION on React

Dipen Maharjan — Sun, 06 Mar 2022 18:04:03 +0000

To use pagination on the react app, there is this npm package called react-js-pagination which is very easy to use and effective as well.

Prerequisite
-Create-react-app
-Bootstrap

I won't be teaching how to create react-app .

Install React-js-Pagination

Install with npm:

npm i react-js-pagination

OR Install with yarn:

yarn add react-js-pagination

Import Pagination

import Pagination from "react-js-pagination";

Setting Up Active Page

const [activePage, setActivePage] = useState(1);

Creating Pagination Component

<Pagination
 activePage={activePage}
 itemsCountPerPage={10}
 totalItemsCount={data.count}
 pageRangeDisplayed={5}
 onChange={onChangePaginate}
 innerClass="pagination"
 itemClass="page-item"
 activeLinkClass="page-link active"
 linkClass="page-link"
 prevPageText="Previous"
 nextPageText="Next"
/>

setting onchange function

const onChangePaginate = (pageNumber) => {
    setActivePage(pageNumber);
    // to set offset
    console.log(pageNumber * 10 - 10)
  };

Visit React-JS-Pagination for more information.