I noticed that the Flutter app is missing characters package.
When you miss characters package in your pubspec.yaml, it will give you an ugly error.
This message – Error: Not found: ‘package:characters/characters.dart is shown on your terminal.
It generally happens when you upgrade your flutter. To resolve this error, we need to add characters package as library.
Next, as a rule of thumb, we have to depend on it. To do that, open your “pubspec.yaml” file, and add this line:
dependencies:
     characters: ^1.0.0
After that, we can install packages from the command line:
With pub:
$ pub get
With Flutter:
$ flutter pub get
In fact, staying on your app folder, after adding the characters package, if you save the file, the Flutter command runs automatically in the background and it gets updated.
The most common use case in managing state in Flutter is to use stateful widget and setState() method.
However keeping the stateful life-cycle on, using this approach, for a complex application, is not advisable.
Each time you change the state, it redraws the whole complex widget tree. We don’t want this.
We want for a single state change, a single widget should be redrawn, not the whole complex tree!
Consider a real life example.
While drawing a tree, you want to change the colour of a single leaf. You want to make it yellow. Will you redraw the whole tree again? Or, you will use a ‘provider’ that will be notified and listen to that particular leaf’s demand and listening that notification, the leaf’s colour will change from green to yellow. In that case, the leaf is the consumer of that provider, which will listen the notification sent by the provider class.
That method also follows the SOLID design principle.
We have used the same approach in Flutter.
First consider a class that has two methods – one increases the value from 0, and the other method decrease that value. We cannot achieve such functionality without maintaining the state of the application.
However, if we follow the same principle described above, it could be much easier and efficient.
We have used the mixin concept of dart. Mixin is a way to abstract and reuse a family of operations and state. We have wanted our class method should notify the Listener.
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ChangeNotifierProvider(
// it will not redraw the whole widget tree anymore
create: (BuildContext context) => CountingTheNumber(),
child: MyHomePage()),
);
}
}
@override
Widget build(BuildContext context) {
final counter = Provider.of(context);
return Scaffold(
appBar: AppBar(
title: Text('Using Provider Example One'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
// only Text widget listens to the notification
Text(
'${counter.value}',
style: Theme.of(context).textTheme.headline4,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () => counter.incrementTheValue(),
child: Text(
'Increase',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () => counter.decreaseValue(),
child: Text(
'Decrease',
style: TextStyle(
fontSize: 20.0,
),
),
),
],
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Now, with each tap of any button, who is the consumer, the provider class will only send the notification and send back the changed value to the listener. Finally, in the main() thread we can run our application.
In any mobile application, we need to navigate from one screen to others. Imagine a friends’ list where we can click on any image to get the details of that person. Likewise, we can see the details of any product in any E-Commerce application.
There are two types of navigations allowed by Flutter. Unnamed route and named route. For a quick one page view, where a single route takes place, unnamed route serves our purpose.
Consider the above image of the First screen. We can see that an image of a person is visible. Besides, there are names and address are also displayed. We could have added many such images of persons one after another. However, to show the example one is enough.
Clicking the image will take us to the next screen where every detail of that person has been stored. It looks like the following image:
Second Screen
The second screen has used a stateful Widget. The ‘Call Me’ button will call the person, if needed. Besides, the ‘Back to Home Page’ button takes us back to the First screen.
The first screen is a stateless widget. In the appbar section, we have used the same code that we use in the body section:
Basically the MaterialPageRoute() class constructor passes a named parameter which is an anonymous function that passes the ‘context’ and returns the SecondPage() class, that we need to create to get the detail of that person.
The name of the Flutter application is ‘route_page_app’ and we have created a package ‘src’ inside the ‘lib’ folder where we have kept our ‘unnamed_route.dart’ file.
In that file we have written our source code of first screen and the second screen.
The code snippet is quite long, so take time to study them, if you are a beginner. Because the second screen uses a stateful widget, it might look little bit complicated for the absolute beginner.
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'About Sanjib Sinha',
style: TextStyle(
fontFamily: 'Trajan Pro',
fontSize: 25,
),
),
),
body: ListView(
children: <Widget>[
Image.asset(
'images/9.jpg',
height: 200,
width: 600,
fit: BoxFit.cover,
),
_titleAndDescription(),
DifferentStatefulButtonWidget(),
],
),
);
}
}
Widget _titleAndDescription() =>
Container(
padding: const EdgeInsets.all(20),
child: Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(bottom: 10),
child: Text(
'Sanjib Sinha',
style: TextStyle(
fontFamily: 'Schuyler',
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
Container(
//padding: const EdgeInsets.only(bottom: 5),
child: Text(
'I love reading books',
style: TextStyle(
fontFamily: 'Trajan Pro',
fontSize: 20,
fontWeight: FontWeight.normal,
),
),
),
Container(
padding: const EdgeInsets.all(2),
child: Text(
'Hi, my name is Some name. I live in Austria, with my parents. Currently,'
' I am studying Computer Science in University Austrian. Because this is '
' a post that does not mean actually anything, please do not expect '
' any detail about me. Better you ask the author who has created this '
'post about me. All I know is the image has been taken from the '
'website Unsplash. It is a very good website with plenty of images '
'that you will like!',
style: TextStyle(
fontFamily: 'Schuyler',
fontSize: 16,
fontWeight: FontWeight.bold,
),
softWrap: true,
),
),
],
),
),
],
),
);
We can think of our UI as a collection of hundreds and hundreds of widgets. One widget consists of many widgets, which again consist of several other widgets, and by doing this we change the view of the Flutter application.
Inside the main function of the Flutter project, we have seen the runApp() function. We pass our application object as parameter or argument inside that function like this:
void main() {
runApp(MyFirstApp());
}
But, what is this ‘MyFirstApp()’, it actually extends another Widget ‘StatelessWidget’. The widget tree is building in that way. According to our code, ‘MyFirstApp()’ becomes the root widget when we pass it through the runApp() function. The root widget sits on the top of the widget tree structure. Below that tree, we start connecting other widgets and our tree grows bigger and bigger.
In the coming chapter, we will discuss this widget tree structure in great detail, because this is the core concept of any Flutter application.
In this section, we are going to change the UI of the existing Flutter application by adding and altering some widgets.
Quite naturally, the code is getting bigger and bigger, however, if we can focus on widget tree structure, we will understand how one widget consists of another widget.
Just use ‘CTRL+SHIFT and I’, it will auto-format your code and give the perfect shape of the widget tree structure. We will also inspect the changes, especially those changes that modifies our UI design.
Running this code will build the new UI for us with the help of new widgets. We will change the the title of the application from ‘Test your personality…’ to ‘Test Your Knowledge…’. The background color has also been changed.
There is a change in the look of the ‘body’ section. Here Scaffold() widget is the main layout of the major material components.
For the reason, under the Scaffold() widget, comes the ‘appBar’ widget tree.
Let us first see the new look of our Flutter application first. After that we will discuss how changing of the widgets affects the old UI design.
widget in flutter
(Figure – New widgets build a new UI for the Flutter application)
Watch the ‘appBar’ section especially.
Now the appearance has been completely changed. In the upper part, we have ‘leading’ widget that has three sub-trees under it – ‘icon’, ‘tooltip and ‘onPressed’. Obviously, these widgets act as named parameters. They describe what will be the view of the header section.
For that reason, on the left side of the text ‘Test Your Knowledge…’ we have a menu button, and on the right side, we have a ‘search’ icon.
Until now, the body part is quite straight forward. Inside the ‘body’ widget, we have three sub-trees – ‘child’, ‘style’, and ‘fontStyle’.
In the lower part of the body section, we have this code:
The ‘floatingActionButton’ widget has again three widget sub-trees – ‘tooltip’, ‘child’, and ‘onPressed’.
Hundreds of Widgets actually build the UI in Flutter.
Keeping that in mind, it’s not wrong to say that widgets are almost everything in Flutter.
As a beginning Flutter developer, people often are stuck with one issue. They cannot launch the virtual mobile device while working with Android Studio.
Watch this image first, it will give you an idea.
android studio and virtual device
We want to do something like this. So that every code we write, will reflect on the virtual device. It can be done by going to the ‘AVD manager’ from tools. But sometimes an ugly error pops up its head and tells that ‘/dev/kvm permission denied’.
In Ubuntu 18 or Mac OS, you can give user the permission by issuing this command:
sudo chmod 777 -R /dev/kvm
But it has a drawback. If someone else uses your machine, then the other user also gets the permission.
The best remedy is – give permission to yourself only by the following commands:
It will solve the issue for ever. Now you can launch any virtual device you want. You can launch the device with your Android Studio, and work with your Visual Studio, just like this:
Visula Studio and virtual mobile device
Here is the sample of code that has been reflected on the above virtual mobile device:
Finding the Armstrong number in a given range is rather a code heavy experience. Before that we should know what is Armstrong number, what it exactly means in number theory. It is also known as a narcissistic number, because it is the sum of its own digits each raised to the power of the number of digits.
Consider the number 153. The number of digits is 3. Now, if each digit of that number is raised to the power of 3, the sum is equal to 153.
Keeping that logic in mind, from 0 to 9, all numbers are Armstrong or narcissistic number.
In the following program, we will let users to give a lower limit and an upper limit, such as, 0 as lower limit, and 100, or 1000 as upper limit. Our program will find all the Armstrong numbers between 0 to that number.
There are different usages of While loop in Java. In some cases, we could calculate the average of definite number of integers. Suppose we enter five integers and get their average.
package fun.sanjibsinha.understandingloops;
import java.util.Scanner;
public class WhileOne {
public static void main(String[] args) {
final int listSize = 5;
double valueOfSum = 0;
int valueProcessed = 0;
System.out.println("Please enter " + listSize + " numbers.");
Scanner sc = new Scanner(System.in);
while (valueProcessed < listSize){
double yourNumber;
yourNumber = sc.nextDouble();
valueOfSum += yourNumber;
valueProcessed++;
}
double averageOfYourNumbers = valueOfSum / valueProcessed;
System.out.println("The average of given numbers " + averageOfYourNumbers);
}
}
Socrates and Plato, Friend, philosopher and guide…
In my previous post, I wrote about how objects contain other objects. Well, I also said that every programming language has its own way to do that. I gave you an example in PHP 7. This time, I am going to give you an example in Java.
I hope you have probably heard the story of Socrates, one of the greatest philosopher who was sentenced to death by the wise men of Athens. Socrates died drinking the poison Hemlock. The reason was quite amazing. Socrates questioned their wisdom and said famously while dying, “an unexamined life is not worth living”.
Socrates’ friend and student Plato, another great philosopher, wrote about his friends, in fact, in Plato’s many writings, Socrates appeared as one of the central character.
Here, we are going to develop a small console based application that tells us the life story Socrates.
There are four objects, Socrates, Plato, Wise men of Athens and the Hemlock.
Let us first define the Socrates class.
package fun.sanjibsinha.object;
class Socrates { public String name = "Socrates"; WiseMen wise; Hemlock hemlock;
public void questionWiseMen(WiseMen wise){ this.wise = wise; System.out.println(this.name + " questioned the wisdom of " + wise.name); }
public void sayToWiseMen(WiseMen wise){ this.wise = wise; System.out.println(this.name + " said to the " + wise.name + " hearing" + " his death sentence, 'an unexamined life is not worth living'."); }
public void dieByDrinking(Hemlock hemlock){ this.hemlock = hemlock; System.out.println(this.name + " died drinking " + hemlock.nature); } }
After that we need a Plato class, similarly, with some states and methods.
package fun.sanjibsinha.object;
class Plato { public String name = "Plato"; Socrates socrates;
public void hasARelationWith(Socrates socrates){ this.socrates = socrates; System.out.println(this.name + " had a friendship with " + socrates.name); } public void writesAbout(Socrates socrates){ this.socrates = socrates; System.out.println(this.name + " had written about his friend and teacher " + socrates.name); } }
Next, we want the wise men of Athens, who decided Socrates’ fate, and gave him death sentence.
package fun.sanjibsinha.object;
class WiseMen { public String name = "Wise men of Athens"; Socrates socrates;
public void giveDeathSentenceTo(Socrates socrates){ this.socrates = socrates; System.out.println(this.name + " had given death sentence to " + socrates.name); } }
The Hemlock object is defined in a small class, where its state has been declared as poison.
package fun.sanjibsinha.object;
class Hemlock { public String nature = "Poison"; }
Finally, we want to run the application by creating the objects, and based on the relationship they have, we build our algorithm.
package fun.sanjibsinha.object;
public class PhilosopherDemo {
public static void main(String[] args) { Socrates socrates = new Socrates(); WiseMen wiseMenOfAthens = new WiseMen(); Plato plato = new Plato(); Hemlock hemlock = new Hemlock(); socrates.questionWiseMen(wiseMenOfAthens); wiseMenOfAthens.giveDeathSentenceTo(socrates); socrates.sayToWiseMen(wiseMenOfAthens); socrates.dieByDrinking(hemlock); plato.hasARelationWith(socrates); plato.writesAbout(socrates); } }
While we run our application, here goes the output:
Socrates questioned the wisdom of Wise men of Athens Wise men of Athens had given death sentence to Socrates Socrates said to the Wise men of Athens hearing his death sentence, 'an unexamined life is not worth living'. Socrates died drinking Poison Plato had a friendship with Socrates Plato had written about his friend and teacher Socrates
I hope, this example will help you to understand how objects contain other objects, and communicate with each other.
Sanjib Sinha 