Home Blog Page 35

When to use FittedBox Widget in flutter

0
flutter fittedbox widget

Hi Guys, Welcome to Proto Coders Point. In this flutter article let’s learn how to fit a widget inside another widget & acquire the available space of it parent widget.

Video Tutorial

To do so we can make use of fittedbox widget of flutter.

Here is what happens when you simply wrap a widget inside another widget in flutter.

Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          child: Center(
               child: Text("Subscribe To Proto Coders Point",style: TextStyle(fontSize: 60),)
            ),
   ),
flutter fitted widget example

As you can see in above image, The Text Widget with fontSize: 75 that is wrapped inside a Container is getting cropped and is not responsive & not fitting inside container. To fix this we can make use of FittedBox widget.


Flutter FittedBox Widget Example

Simply wrap the child widget of Container with FittedBox, What FittedBox will do is it will automatically Scales and positions its child within the available space of it parent.

Code Example

Container(
          width: 300,
          height: 200,
          color: Colors.blue,
          child: FittedBox(
              child: Center( 
                        child:  Text("Subscribe To Proto Coders Point",style: TextStyle(fontSize: 60),)
              )
          ),
),
flutter fitted widget example

In Above code FittedBox will simply ignore the size given to it’s child, In our case we have Text with fontSize as 60.

Drawback of this is: Suppose In Above Example I give smaller fontsize to Text, Even though it will acquire the complete available fit.

To fix this use fit Property of FittedBox widget Example below:

Container(
          width: 300,
          height: 200,
          color: Colors.blue,
          child: FittedBox(
            fit: BoxFit.scaleDown,
              child: Center(
                        child:  Text("Subscribe To Proto Coders Point",style: TextStyle(fontSize: 10),)
              )
          ),
        )
flutter fitted widget example

How to preserve scroll position of listview – flutter PageStorageKey

0
flutter save listview scroll position

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

0
flutter clear pub cache

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
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:

flutter pub cache clean
flutter pub cache clean

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

0
circularprogressindicator size flutter

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

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


Recommended Article

How to reverse a string and check if its a palindrome

How to create new flutter project using command – without IDE

0
Flutter Create Project command

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.

Check flutter version & Dart version

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.