How to Center the title in AppBar widget in Flutter

How to Center the title in AppBar widget in Flutter

By default the title in the AppBar widget in Flutter applications is left aligned and we may want to align it to the center.

Aligning title of AppBar widget to Center in Flutter is very much straight forward. All we need to do is to add an option centerTitle and set its value to true in the widget.

centerTitle: true

full code:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter') ,
        centerTitle: true,
      ),
    ) ;
  }

The output for the above code will be:

Read more about AppBar widget here: Deep Dive into AppBar

How to Word Wrap in Android Studio

How to Word Wrap in Android Studio

While working with Android Studio we may want to wrap the words inside the editor so that the entire code fits inside visible area and no need to scroll horizontally. We may also wants to wrap the code in the visible area when we want to take a screenshot of the code in the IDE.

To wrap the code, go to File – Settings – Editor – General and check the box with Soft-wrap these files.

Then add the type of the files you want to soft wrap such as *.dart. Also make sure that the file extensions are separated by semicolons (;) and not commas.

 

 

How to remove DEBUG banner from the Emulator in Flutter Apps

How to remove DEBUG banner from the Emulator in Flutter Apps

During the development Flutter automatically adds DEBUG banner to the applications. Sometimes we may want to remove this banner for any reason such as taking a screenshot without the DEBUG banner.

To remove the DEBUG banner from the application, go to main.dart and add the following option to the MaterialApp (or CupertinoApp for iOS apps ) widget

debugShowCheckedModeBanner: false,

example:

...
return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage() ,
    );
...

Flutter automatically removes the DEBUG banner when we build the application for production.

What is the difference between extends and implements in Flutter or Dart

What is the difference between ‘extends’ and ‘implements’ in Flutter or Dart

Extends vs Implements in Dart / Flutter

Extends:

We use extends in Dart/Flutter to implement the inheritance concept of Object Oriented Programming.

Suppose if class B extends class A, then class B, inherits all properties and methods from class A.

example:

class A {
  final int id;

  A(this.id);

  void tellDetails() {
    print('my id is: $id');
  }
}

class B extends A {
  final String name;
  B(id, this.name) : super(id);
}

void main() {
  var bObj = B(123, 'John Doe');
  bObj.tellDetails();
}

In the above example, class A have id property and tellDetails method and class B extends class A. Class B also have its own property name.

Since class B extends class A, we can use all the properties or methods of class A in class B just like we used tellDetails method on bObj object which is an instance of class A.

We cannot extend more than one class in Dart. If you try to extend more than one class then Dart will throw the error “Each class definition can have at most one extends clause”.

This is one of the core concept of Object Oriented Programming in any programming language and Dart is also same here.

Implements:

In Object Oriented Programming, an Interface is just like planning stage which tells, what needs to be implemented in a class, but do not provide any details about How to Implement.

Many programming languages have Interfaces built into the programming language, but, Dart Do not have Interfaces.

Though Dart do not have interfaces, it supports Interfaces concept, not by using a separate interface, but by using a class itself. That means, we can use classes itself to work like an interface.

example:

class A {
  final int id;

  A(this.id);

  void tellDetails() {
    print('my id is: $id');
  }
}

class B implements A {
  @override
  final int id;

  final String name;

  B(this.id, this.name);

  @override
  void tellDetails() {
    print('Id details from B: $id ');
  }
}

Unlike with inheritance where you get properties and methods automatically from the parent class, when you are implementing a class, you must implement all the properties and methods of that class.

One more difference between extends(inheritance) and implements is that, you cannot inherit from more than one class but you can implement more than one class.

example:

class A {
  final int id;

  A(this.id);

  void tellDetails() {
    print('my id is: $id');
  }
}

class C {
  final String city = 'ABC';
}

class B implements A, C {
  @override
  final int id;

  @override
  final String city = 'XYZ';

  final String name;

  B(this.id, this.name);

  @override
  void tellDetails() {
    print('Id details from B: $id ');
  }
}

void main() {
  var bObj = B(123, 'John Doe');
  bObj.tellDetails();
}

In this example class B implements both class A and class C.

Though @override is optional in the examples above, it is always recommended to use it. It lets the developer know which are all the properties and methods that must be implemented and which are the properties and methods that are added additionally in the class B.

Using Abstract Classes as Interfaces

We can make use of abstract classes in Dart which acts almost like an interface.

example:

abstract class A {
  void tellDetails();
}

class B implements A {
  @override
  void tellDetails() {
    print('Id details from B');
  }
}

In this example, you can find that the implementation of tellDetails was removed from class A and was done in class B.

Read more about Classes in Dart

How to check Type of a Variable in Dart or Flutter

How to check Type of a Variable in Dart or Flutter

There are couple ways to determine the type of a variable in Dart/Flutter.

Similar to the way developers use ‘typeof‘ operator in JavaScript, we can use runtimeType in Dart.

example:

void main() {
  var myNum = 10;
  var myNum2 = 10.0;
  var myString = 'Hello World';
  var myBool = true;
  var myArray = [1, 2, 3];
  var person = {'id': 1, 'name': 'John Doe'};

  print(myNum.runtimeType);
  print(myNum2.runtimeType);
  print(myString.runtimeType);
  print(myBool.runtimeType);
  print(myArray.runtimeType);
  print(person.runtimeType);
}

Output:

int
double
String
bool
List<int>
_InternalLinkedHashMap<String, Object>

Pay attention to the way we initialized the variables myNum and myNum2. If you want to create a variable using var keyword and wants to make it of type double, you need to add ‘.’ else it will considered as int.

Another way to find the type of a variable in Dart/Flutter is by using is operator which is similar to instanceof operator in JavaScript.

example:

void main() {
  var myNum = 10;

  if (myNum is int) {
    print('myNum is an integer');
  }
}

Output:

myNum is an integer

Here again pay attention to the int inside the ‘if’ condition which is not a string.