How to preserve scroll position of listview – flutter PageStorageKey

By

-

June 26, 2022

Hi Guys, Welcome to Proto Coders Point. In this flutter article let’s learn how to save position of listview when it scrolled ( basically preserve scroll position of listview builder in flutter).

To save Scrolled position of the listview we make use of key property of listview.builder and attach PageStorageKey to it.

Flutter PageStorageKey

PageStorageKey class is used to store the state of any widget in key property once the widget is destructured from the view & then use the stored PageStorageKey to recreate the same state of a widget. Learn more on official site Here.

Easiest way to understand PageStorageKey

Here is a senario:

We have a flutter app, that has list of item been shown in listview by using listview.builder, Now when user Tap on an item in listview the selected item is show on next page, But when user take back to select some other next tiem from listview, the state of the listview is not preserved, listview is rebuild it state from item 1.

So to fix this we make use of PageStorageKey to save the position of listview, gridview scrolled position, so then when user some back to listview, he is still in the same position of listview.

Below is Snippet code to Save Position of Listview Scroll

ListView.builder(
          key: const PageStorageKey<String>('listvew1'),   // add this link
            itemCount: 200,
            itemBuilder: (context,index)=>
                ListTile(
                  title: Text("This is Item No: ${index}"),
                  onTap: (){
                    Navigator.push(context, MaterialPageRoute(builder: (build)=>SelectedItemPage()));
                  },
                ),
        ),

Note: Here the key that you are assiging to Listview PageStorageKey should be unique in flutter app lifecycle.

How to Repair/clear cache of all Dependencies in .pub-cache Flutter

By

Rajat Palankar

-

June 24, 2022

0

Hi Guys, Welcome to Proto Coders Point. In this flutter article let’s understand how to repair cache in flutter.

So you are developing a flutter application & encountered an issue in dependencies cache or the package is broken due to several issues(in the ./pub-cache folder).

To solve this you can simple repair cache by running below command:

flutter pub cache repair

The process of repairing cache in flutter will take minimum 10 seconds or more, depending of how many dependencies package you have & internet speed.

Flutter clear cache

If you are willing to clear/delete cache package, then run below command:

flutter pub cache clean

While deleting the flutter project cache, you will be asked to confirm y/N, Press y:

After successfully above flutter clean, you need to run flutter pub get in your project, it will freshly install all the required plugins.

flutter pub get

How to Increase size of CircularProgressIndicator in flutter

By

Rajat Palankar

-

June 24, 2022

0

Hi Guys, Welcome to Proto Coders Point. In this Flutter Article let’s learn how to increase size of CircularProgressIndicator.

So, As the name itself implies, CircularProgressIndicator Widget is used to show a circle rotating progress by seeing which flutter app user can understand that something is loading.

Flutter increase circular progress indicator size

Actually, In flutter the size of child widget depends of the size of it’s parent, Therefore, We can easily increase the size of circular progress indicator just wrapping it with a Container or SizedBox Widget where we can set height & widget.

Code Reference:

Scaffold(
      appBar: AppBar(title: const Text('ProtoCodersPoint.com')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            const SizedBox(
              width: 150,
              height: 150,
              child: CircularProgressIndicator(
                color: Colors.blue,
                strokeWidth: 8,
              ),
            ),
            Container(
              width: 220,
              height: 220,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.pink),
              child: const CircularProgressIndicator(
                color: Colors.orange,
                strokeWidth: 8,
              ),
            )
          ],
        ),
      ),
);

Read more about CircularProgessIndicator in flutter.

How to Reverse a String in Dart, 3 Ways Examples

By

Rajat Palankar

-

June 23, 2022

0

how to reverse a string in dart — flutter reverse string

How to Reverse a String in Dart (3 Approaches)

Hi Guys, Welcome to Proto Coders Point, In this Dart article let’s learn how can we reverse a string in dart.

Below are the three different ways to reverse a given string in dart programming language. For Example: (XYZ –> Convert to ZYX). By reversing a string you can check if a given string is palindrome or not.

Let’s get Started

Example 1 – Reverse strig using in-built reversed method

//PROTOCODERSPOINT
// A Function that reverse a given string.

String reverseAString(String input) {
  final output = input.split('').reversed.join('');

  return output;
}

void main() {
  print(reverseAString('NITIN'));
  print(reverseAString('"We are what we think." — Buddha'));
}

Output:

NITIN ahdduB — ".kniht ew tahw era eW"

Example 2 – String reverse using String.fromCharCodes & codeUnits.

//PROTOCODERSPOINT
// A Funcion that reverse a given string using  codeUnits & fromCharCodes methods.

String reverseAString(String input) {
 String reversedString = String.fromCharCodes(input.codeUnits.reversed);
  return reversedString;
}

void main() {
  print(reverseAString('ROTATOR')); 
  print(reverseAString('Live life to the fullest.'));
}

Output:

ROTATOR .tselluf eht ot efil eviL

Example 3 – Reverse a String using reverse for loop & buffer writter.

//PROTOCODERSPOINT
// A Funcion that reverse a given string using reverse for loop.

String reverseAString(String input) {
  var buffer = StringBuffer();
  for (var i = input.length - 1; i >= 0; --i) {
    buffer.write(input[i]);
  }
  return buffer.toString();
}

void main() {
  print(reverseAString('NITIN'));
  print(reverseAString('Imagination is greater than detail'));
}

Output:

NITIN liated naht retaerg si noitanigamI

How to create new flutter project using command – without IDE

By

Rajat Palankar

-

June 23, 2022

0

Hi Guys, Welcome to Proto Coders Point, In this flutter article let’s learn how to create a new flutter project without using IDE(Create flutter project using cmd).

How to create flutter project using cmd prompt

Before creating flutter project, make sure flutter & dart is installed in your OS.

To check it run ‘flutter –version’ cmd in terminal.

Now, Once you verify that flutter sdk & Dart sdk is successfully installed then now we can create new Flutter project by being into project directory where you want to create new flutter project using cmd.

run flutter create .

NOTE: Make sure your project folder name is all in lowercase(small letter), You can use letter a-z, underscore & digit 0-9 (the folder name should not start with number).

flutter create new project using terminal

As you can see my flutter project is created

Create Flutter Project specifying organization name

By default, organization is ‘com.example.<your_project_name>’. If you want to specify organization then use –org flag while creating project.

Eg:

flutter create --org com.protocoders.point

The Organization name is an bundle identifier for iOS & Android.

Therefore, We have successfully create new flutter project just by using terminal cmd.

git cheat sheet – github commands cheat sheet

By

Rajat Palankar

-

June 21, 2022

0

Hi Guys, Welcome to Proto Coders Point.

GIT CHEAT SHEET

To improve your workflow, use this useful git cheat sheet pdf file. When you can’t remember what a command is or don’t want to use git help at the command line 😂😅 , This Github commands cheat sheet will save you time ⏱️ . Of course It’s difficult to remember all of the key Git commands by heart ❤️, so print this out or save it to your desktop for when you get stuck. We’ve included fundamental Git commands as well as more complex topics like as Git branches, remote repositories, undoing changes, and more to help you understand Git.