Declarative and Imperative Programming in the flutter
Maybe after reading the heading you would be thinking about how this core concept is relevant in the flutter. So the answer is “Core Concept remains the same irrespective of language and framework”, and here we are going to take a look at what is this declarative and imperative programming, what are the advantages, and how both things effect or affect the programming approaches.
Declarative programming and imperative programming are two different approaches to get your work done
Table Of Contents::
Declarative Programming:
Declarative programming is a kind of programming or approach where we mainly focus on our desired output or what would be the result irrespective of process, approaches, coding pattern. We simply pay attention to what we are trying to achieve.
Imperative Programming:
Imperative programming is a kind of programming or approach where we make our focus on the process, follow guidelines, patterns step by step and try to compile things in order from where the correct answer can be found.
These definitions of both approaches would have cleared the basic difference between them but let’s take a little glance over this analogy again if you are wanting a final product or output without caring about the path process or pattern and wanting it to get ready for the final version and able to do so it comes under the declarative kind of thing.
While you are not only wanting to get your product done but you are focusing on the thing like skills, you want yourself to get involved with the product make your self able to do thing by your own only just to make up the requirements keeping all legitimate requirements in a best-suited way is comes under imperative programming.
Why you should Prefer Declarative Programming
Reusability:
In declarative programming the main aim to write code that could be reusable. In flutter, there are different ways to do so like using extensions or making custom widgets(at a normal level) however this is not the main aim of declarative programming but making a big whole module that can perform the whole required operation. here we are going to see a simple example of an extension method that we can use in the whole app but write only once.
import 'package:flutter/material.dart';
extension ShapeBorderX on ShapeBorder {
static ShapeBorder roundedRectangle(double radius) {
return RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(radius),
),
);
}
}
extension WidgetPaddingX on Widget {
Widget paddingAll(double padding) => Padding(
padding: EdgeInsets.all(padding),
child: this,
);
}Managing Errors:
In Declarative programming, we write centralized code and try to manage each and everyone at the same place and does not change the working it helps to reduce errors while maintaining the code compilation and it helps to become your app more stable and make you able to read input-output of method efficiently.
But there are certain drawbacks of Declarative Programming
Lack Of control :
In Declarative programming, you may have a problem when you get something that contains the same thing but some additional features which have not been handled in your centralized code and this is a struggling time for you as a developer but as we know that flutter has a solution for this also, you need to define these new things also as an optional parameter.
import 'package:flutter/material.dart';
import 'package:gamekhelo/custome_widgets/custom_plain_button.dart';
import 'package:gamekhelo/extras/constants/index.dart';
import 'package:gamekhelo/extras/constants/dimensions.dart';
import 'package:gamekhelo/extras/theme/text_themes.dart';
class CustomDialog extends StatelessWidget {
final DialogType dialogType;
final String title;
final Function onOk;
final Function onCancel;
const CustomDialog({this.dialogType, this.title, this.onOk, this.onCancel});
@override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.transparent,
child: Container(
height: Dimensions.boxHeight * 30,
width: Dimensions.boxWidth * 80,
padding: EdgeInsets.all(Dimensions.boxHeight * 3),
decoration: BoxDecoration(
color: ColorConstants.grey,
borderRadius: BorderRadius.circular(10),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Text(
title,
style: TextThemes.h17.copyWith(
color: ColorConstants.textWhite70,
),
),
],
),
),
SizedBox(
height: Dimensions.boxHeight * 2,
),
SizedBox(
width: Dimensions.boxWidth * 70,
child: dialogType == DialogType.confirm
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 100,
child: CustomPlainButton(
isOutlined: true,
isSmall: true,
onTap: onCancel ??
() {
Navigator.pop(context);
},
label: "CANCEL",
),
),
SizedBox(
width: 100,
child: CustomPlainButton(
isSmall: true,
onTap: onOk ??
() {
Navigator.pop(context);
},
label: "OK",
),
),
],
)
: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 100,
child: Center(
child: CustomPlainButton(
isSmall: true,
onTap: onOk ??
() {
Navigator.pop(context);
},
label: "OK",
),
),
),
],
),
),
],
),
),
);
}
}for example, in the above code, you can see a Custom Dialogue where the only few required things and it is being used in the whole app but if you need to show an extra text at any place we are not going to design another dialogue but will make that text optional and will show. Now that extra text will be compiled in every dialogue even though it is not being used in other dialogues.
Lack of Efficiency:
When you are doing all these things which have mentioned above and you are making your whole code able to work on all desired features being used in your application but while you also having some part of code that is not being used in some special parts at that time compiler compiles that set of code while you are not using it. So sometimes it can be a little hectic for the compiler.
for example, you are using text field as a custom widget and performing some validation in some part and showing error while at some places you don’t need to do validation but when the code compiler will compile code it will compile at both places. (it can also be managed but it is an example for common understanding)
Conclusion:
In this article, we have understood how declarative programming can empower the working of any application and how it can be beneficial, when it comes to maintaining high-class code architecture however the examples explained above were just understanding of basics, and code snippets were only for a demo, but one thing is clear declarative programming is an approach which has been largely accepted and advocated by the community.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
