So you are here to know the best flutter package/plugins, That means you might be having a great and awesome cross-platform project idea in your mind using flutter? am I right? then you are in the right place to make research on the best plugins for a flutter app development.
Bro, Don’t miss this is simple yet easy-to-use and awesome flutter packages to include in your project that makes app development much faster and easier.
//Easy Navigation to Flutter Pages
Get.to(Page2());
// Display Snackbar messages
Get.snackbar("Hi", "message");
//Easy to display a dialog pop
Get.defaultDialog(title: "THIS IS DIALOG BOX USING FLUTTER GET X ",middleText: "GET x made Easy");
And much more Event is easily possible using Flutter GetX.
Using Equatable you can compare between objects, and thus save lots of time in writing boiler plate codes.
Equatable easily override == & hashcode with flutter equatable there is no need to generate code, you can keep your focus of writing amazing flutter application. To learn more visit official sire here
Snippet Code Flutter Equatable Example
import 'package:equatable/equatable.dart';
class Fruits extends Equatable{
final String FruitName;
Fruits(this.FruitName);
@override
// TODO: implement props
List<Object> get props => throw UnimplementedError();
}
// inside main or class
Fruits fruits1 = Fruits("Apple");
Fruits fruits2 = Fruits("Banana");
print(fruit1 == fruit2); //return false
Fruits fruits3=Fruits("Banana");
print(fruit1 == fruit2); //return true
This Flutter storage package will work the same as SHARED PREFERENCES but in a secured form, This flutter storage plugin will store data in a secured way with AES Encryption.
So, Once your flutter project is ready to be distributed publicly, then it’s time to add-on an awesome functionality, such as share, where your app user can easily share flutter app URL with his friends & family to download your awesome flutter application.
What is Flutter Share plugin?
The flutter share plugin is very useful when the user wants to share contents from the flutter app with any of his friends via the platform share dialog box.
This plugin is wraped with ACTION_VIEW INTENT as in android and UIActivityViewController as on iOS devices.
whenever the flutter app user wants to share any contents he can just click on the share button which simply pop-up a share dialog using which he/she can easily share contents.
snippet code flutter share
//on share button pressed
onPressed: () {
Share.share(
'check out my website https://protocoderspoint.com/');
},
Recyclerview user entered – array list send to database
Ok So let’s begin,
Database Setup
My database is hosted with my website hosting protocoderspoint.com, so in my hosting i have created a new database special for this tutorial.
Create a new table in your phpmyadmin database
How a look at database, it has a table by name : ‘ExpenseTable’ which has 3 column
id : type int auto Increment.
ExpenseName : type varchar(50).
ExpenseAmt : type varchar(50).
command to create table in your database
CREATE TABLE `ExpenseTable` (
`id` int(11) NOT NULL,
`ExpenseName` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL,
`ExpenseAmt` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
So now we are done with create the database table now let’s go with php code that helps us in getting connected with database and store the array list data into the table.
Php code – connect database – storing array list to data table
Here are 2 php files/code
connect.php: Help us in getting connected with our database.
save_expense.php: Helps us in storing/inserting data into our database.
The connect.php is a common php code that help in getting connected with our database, I have created connect.php file separate so that in my other php code i can simply include connect.php code that’s it, whenever i hit or call other php code where connet.php is included it automatically get connected to out database.
Here the PHP code is receiving ArrayList in the form of JSON ARRAY, that is been decoded using the json_decode function.
After that we are using for loop to iterate the total number of data present in the array list using count($expname) this will return a number, for example, suppose your array is [‘0’, ‘1’, ‘2’, ‘3’] then count will return 4, so the for loop will run for 4 times. Then in for loop, we have a SQL query then will insert the data into our database using mysqli_query.
Ok so now we are done with our php script that will insert data into our database, now let’s go to android coding.
Android Coding –
Recyclerview EditText Entered data store in an array and send to database
android project structure
Have a look at my android project structure for easy understanding of the android tutorial on Recyclerview with editText Field.
So as we are making internet call to send data to our database, we need to specify which domain or IP we are using to send/receive data, so for that, you need to create a networksecurityconfig.xml file in res>xml>
create a directory “XML” inside res then create an XML resource file networksecurityconfig.xml under that directory and copy-paste the below code.
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">protocoderspoint.com</domain> // Here replace with your domain/IP
</domain-config>
</network-security-config>
Then go to your AndroidManifest.xml and add the network SecurityConfig file under <application> tag
Hi Guys, Welcome to Proto Coders Point, In this tutorial we will build a app that has a recyclerview with a list of view items and each list item in adapter has a Expense name (TextView) and a EditText field where user can enter the expense he spent for that expense. Check out below screenshot
Have a look at my android project structure for easy understanding of the android tutorial on Recyclerview with editText Field.
Android Project Structure
So as you can see in above project structure, i have created 2 folder one for Recyclerview Adapter and a Data model that hold our dataSet that will be displayed in androidx Recyclerview.
Java Class
Adapter.java: That will help to inflate view in recyclerview.
ItemDatamodel.java: That holded list of data’s.
XML Layout
activity_main.xml : Where list of data will be displayed.
card_prod_list.xml : Eiew that will be shown to display particular list of items.
Recyclerview android example with edittext (source code)
UI XML Source Code below
card_prod_list.xml
Cardview that get generated when list of passed from activity to recyclerview adapter
that all in xml layout you need to add. now let’s jump to java source : android recyclerview adapter and datamodel.
Java source : android recyclerview adapter and datamodel.
ItemDatamodel.java
Our DataModel class holder 2 kinds of datatype i.e integer and a string. interger to hold Expense Id and String that holds ExpenseName.
package com.example.recyclerview_image_pick.datamodel;
public class ItemDatamodel {
int ExpenseId;
String ExpenseName;
public ItemDatamodel(int expenseId, String expenseName) {
ExpenseId = expenseId;
ExpenseName = expenseName;
}
public int getExpenseId() {
return ExpenseId;
}
public String getExpenseName() {
return ExpenseName;
}
}
Adapter.java
Check out the comment in code to under the Android Recyclerview Adapter code.
package com.example.recyclerview_image_pick.Adapter;
import android.app.Activity;
import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.example.recyclerview_image_pick.R;
import com.example.recyclerview_image_pick.datamodel.ItemDatamodel;
import java.util.ArrayList;
public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> {
View rootView;
Context context;
private ArrayList<ItemDatamodel> dataSet;
// Usered Entered Expense amt will be stored in ExpAmtArray
ArrayList<String> ExpAmtArray = new ArrayList<String>();
boolean isOnTextChanged = false;
int ExpenseFinalTotal = 0;
TextView textviewTotalExpense;
//constructor with dataSet passed from MainActivity when Adapter is called
public Adapter(ArrayList<ItemDatamodel> dataSet) {
this.dataSet = dataSet;
}
//Recyclerview ViewHolder
public static class MyViewHolder extends RecyclerView.ViewHolder {
TextView expensesName;
EditText expHeld;
Button imageButton;
public MyViewHolder(@NonNull View itemView) {
super(itemView);
// finding view by view id.
expensesName = (TextView) itemView.findViewById(R.id.textViewExpName);
expHeld = (EditText) itemView.findViewById(R.id.ExpHeld);
imageButton = (Button) itemView.findViewById(R.id.ExpBimageSelect);
}
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// Initialize view for recyclerview
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.card_prod_list, parent, false);
context = parent.getContext();
rootView = ((Activity) context).getWindow().getDecorView().findViewById(android.R.id.content);
textviewTotalExpense = (TextView) rootView.findViewById(R.id.totalExpense);
//attach view to MyViewHolder
MyViewHolder myViewHolder = new MyViewHolder(view);
return myViewHolder;
}
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
//initialize the view with view holder
TextView expensesName = holder.expensesName;
EditText expHeld = holder.expHeld;
Button imageButton = holder.imageButton;
expensesName.setText(dataSet.get(position).getExpenseName());
// EditText with TextWatcher Listens each time when user enter value in edittext in recyclerview
expHeld.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
//using this boolean because sometime when user enter value in edittxt
//afterTextchanged runs twice to prevent this, i m making use of this variable.
isOnTextChanged = true;
}
@Override
public void afterTextChanged(Editable editable) {
//so this will trigger each time user enter value in editText box
ExpenseFinalTotal = 0;
if (isOnTextChanged) {
isOnTextChanged = false;
try {
ExpenseFinalTotal = 0;
for (int i = 0; i <= position; i++) {
int inposition1 = position;
if (i != position) {
//store 0 where user select position in not equal/
ExpAmtArray.add("0");
}else {
// store user entered value to Array list (ExpAmtArray) at particular position
ExpAmtArray.add("0");
ExpAmtArray.set(inposition1,editable.toString());
break;
}
}
// for statement to loop to the array, to calculate the Expense total.
for (int i = 0; i <= ExpAmtArray.size() - 1; i++) {
int tempTotalExpenase = Integer.parseInt(ExpAmtArray.get(i));
ExpenseFinalTotal = ExpenseFinalTotal + tempTotalExpenase;
}
textviewTotalExpense.setText("Total Expenses: ₹ "+String.valueOf(ExpenseFinalTotal));
}catch (NumberFormatException e)
{
// catch is used because, when used enter value in editText and remove the value it
// it will trigger NumberFormatException, so to prevent it and remove data value from array ExpAmtArray
//then
// re-perform loop total expense calculation and display the total.
ExpenseFinalTotal = 0;
for (int i = 0; i <= position; i++) {
Log.d("TimesRemoved", " : " + i);
int newposition = position;
if (i == newposition) {
ExpAmtArray.set(newposition,"0");
}
}
for (int i = 0; i <= ExpAmtArray.size() - 1; i++) {
int tempTotalExpenase = Integer.parseInt(ExpAmtArray.get(i));
ExpenseFinalTotal = ExpenseFinalTotal + tempTotalExpenase;
}
textviewTotalExpense.setText("Total Expenses: ₹ "+String.valueOf(ExpenseFinalTotal));
}
}
}
});
}
@Override
public int getItemCount() {
return dataSet.size();
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public int getItemViewType(int position) {
return position;
}
}
MainActivity.java
package com.example.recyclerview_image_pick;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DefaultItemAnimator;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.util.Log;
import com.example.recyclerview_image_pick.Adapter.Adapter;
import com.example.recyclerview_image_pick.datamodel.ItemDatamodel;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private static ArrayList<ItemDatamodel> data;
ItemDatamodel itemDatamodel;
// list of Expensesname
String[] Expensesname = {"Rent","Coffee","Lunch","Dinner","Transport","Other"};
private static RecyclerView.Adapter adapter;
private RecyclerView.LayoutManager layoutManager;
private static RecyclerView recyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view_expenses);
recyclerView.setHasFixedSize(true);
layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setItemAnimator(new DefaultItemAnimator());
data = new ArrayList<>();
// generate ArrayList and store in data model
for(int i =0;i<Expensesname.length;i++){
itemDatamodel = new ItemDatamodel(
i,
Expensesname[i]
);
data.add(itemDatamodel);
}
// call Adapter class by passing ArrayList data
adapter = new Adapter(data);
// set adapter to recyclerview
recyclerView.setAdapter(adapter);
adapter.notifyDataSetChanged();
}
}
#video Tutorial will be uploaded soon on my youtube channel.
Don’t be rely to much on tutorials, if you are beginner consider learning flutter or any other development from multiple sources so that you get idea and find your own ways to solve your software development problem.
2. Start directly with cross platform development
Do not jump directly into learning cross platform development with flutter or React Native or any other cross development, always start with learning native like (Android – Java / kotlin or IOS – swift) is a key to learn how individual platform is built. If you start directly with cross playform then there are more chances that you may get stuck because of individual platform requirement.
3. Not staying consistent in learning flutter or any other.
Upgrading ourselves by being consistent in learning flutter or any other programming stuff.
Being upgraded with latest technology is very important in an IT field.
Being consistent in any field is the way to success.
Many beginner in flutter jump directly into library that are in trending such as statemanagement using GetX, Bloc ,Provider.
If you do this then you many miss many basic feature of flutter dart, so just complete the basic of flutter first, understand how flutter setState works then use those libraries, some library are necessary other feature can be achieved by DIY Solution.
5. Not Implementing knowledge in real projects.
I saw people, they just complete a course in a particular field (flutter course) an start searching for a job as soon as they complete the futter course or any other. some people may get job immediatly but maximum people will fail to clear job interview due to lack of experience. (Check out Flutter Interview Question and answer asked in interview round) Instead, As soon as you complete the course start making flutter apps or any other android, IOS, Web for your practice or just try to get a freelance projects work for them get knowlegde & experience then apply for a good job.
Hi Guys, Welcome to Proto Coders Point, I got query from one of my subscriber on youtube channel saying his flutter application is not working on some of devices.
Then i tried to solve his problem manually by myself then after some research on stackoverflow, github and all, i got to the solution.
Solution for flutter app not running on some devices
Here are some solution i have tried on my flutter app and that worked for me. (HOPE IT WORKS FOR YOU TO)
Run the app on a Physical Device : If you are using a Emulator to test your flutter application then, just check in your physical device.
Sign in config Debug / Release : With my experience i observed that beginner in flutter forgot to change sign in config from debug to release, if app is generated in debug mode, that particular app will not work on mobile devices where developers mode is disable. CHECK OUT THIS VIDEO BELOW TO GENERATE SIGNED APK
Proper way to generate signed apk from flutter application project
This package library will make it very easy and fast to change flutter android package name.
How to use flutter change package name
So, Let’s begin with how to alter android package name in your flutter application.
1. Adding dev dependencies
Open <flutter project> / pubspec.yaml under this file look for dev_dependencies : section, just below it add change app package name, as shown in below screenshot.
dev_dependencies:
change_app_package_name: ^0.1.2
2. Updating Flutter pub get
Once you have added any new dependencies in pubspec.yaml file, you always need to update it,
Then, to do that you need to run a commant i.e.
flutter pub get
Then, this commend will download the latest dependencies library files in your flutter project External Libraries, in our case it change_app_package_name.
3. Running a command to alter package name
You just need to run a command that will alter package name of your flutter android module.
See down of your IDE(Android Studio/VsCode) you may see terminal open it and just paste below cmd that will automatically change package name of your project.
flutter pub run change_app_package_name:main com.new.package.name