DEV Community: Samuel Wahome

Navigator overview in Flutter.

Samuel Wahome — Tue, 18 Jan 2022 15:50:50 +0000

If you come from a native Android development background, then you've probably used Jetpack Navigation to navigate between Fragments in an application. The same can be said for UINavigationController if you come from an iOS background, which defines a stack-based scheme for navigating hierarchical content.

In Flutter, it is accustomed for one to use a Navigator widget to manage your screens or pages(which may also be referred to as routes). A stack is a data structure that manages pages. You insert the elements last-in, first-out, and only the element at the top of the stack is visible to the user.

There are currently two iterations of Navigation in Flutter: Navigator 1.0 and Navigator 2.0. Before we delve into Navigator 2.0, let's have a quick overview of Navigator 1.0.

Overview of Navigator 1.0

Navigator 1.0 provides a simple set of APIs for you to navigate between screens. The most common ones include:

push(): Adds a new route on the stack.
pop(): Removes a route from the stack.

One is able to add Navigator to a Flutter application via the use of WidgetsApp, which wraps many other common widgets that a Flutter app requires. Among these wrapped widgets is a top-level Navigator to manage the pages you push and pop. To get a deeper understanding of how navigation with named routes works, then this article will be of much help.

Using Navigator 1.0 may seem easy enough, but it does have its own disadvantages, which are:

There's no good way to manage your pages without keeping a mental map of where you push and pop a screen.
Navigator 1.0 doesn't expose the route stack to developers.
Navigator 1.0 does not update the web URL path.
On Android devices, the Back button might not work with Navigator 1.0 when you have nested navigators or when you add Flutter to your host Android app.

Overview of Navigator 2.0

Navigator 2.0 came with Flutter 1.22, which allowed one to take full control of the application's navigation stack. The main goals of this declarative API include but are not limited to:

Manage nested navigators: Gives you control over which navigator has priority.
Manage navigation state: This lets you parse routes and handle web URLs and deep linking.
Exposing the navigator's page stack: One can now manage app pages.
Backward-compatible with imperative API: One can use both imperative and declarative styles in the same app.
Handle operating system events: Works better with events like the Android system's Back button.

The above image shows an overview of Navigator 2.0's declarative API. The declarative API includes the following key components:

Page: An abstract class that describes the configuration for a route.
Router: Handles configuring the list of pages the Navigator displays.
RouterDelegate: defines how the router listens for changes to the app state to rebuild the navigator's configuration.
RouteInformationProvider: Provides RouteInformation to the router.
RouteInformationParser: Parses route information into a user-defined data type.
BackButtonDispatcher: Reports presses on the platform system's Back button to the router.
TransitionDelegate: Decides how pages transition into and out of the screen.

It is important to note, however, that this post is by no means a nudge towards using a particular navigation option, but only an overview of the two options that are available thus far, hence if you are happy with how the Navigator works today, you may keep using it in the same (imperative) way. If you do need any more information on the differences between the two approaches, then this video should be of much help:

Navigator 2.0 libraries to check out.

Navigator 2.0 may not be the easiest API to use out there, hence the following are some of the packages out there that wrap around the Navigator 2.0 API to make routing and navigation easier:

1. Beamer.

According to the official documentation:

Beamer handles your application routing on all platforms, synchronize it with the browser's URL bar, and more. Beamer uses the power of Router and implements all the underlying logic for you.

Beamer was designed to solve the following two major pain points:

Make the use of Router API easier, especially for beginners.
Segregate the responsibility of creating a page stack, for intermediate and advanced usage.

At the highest level, Beamer is a wrapper for Router and uses its own implementations for RouterDelegate and RouteInformationParser(BeamerDelegate and BeamerParser). The goal of Beamer is to separate the responsibility of building a page stack for Navigator.pages into multiple classes with different states, instead of one global state for all page stacks.

2. go_router.

According to the official documentation:

go_router is a declarative router for Flutter based on Navigation 2 supporting deep linking, data-driven routes and more.

The goal of the go_router package is to simplify the use of the Router in Flutter as specified by the MaterialApp.router constructor. By default, it requires an implementation of the RouterDelegate and RouteInformationParser classes. These two implementations themselves imply the definition of a custom type to hold the app state that drives the creation of the Navigator.

3. flow_builder.

According to the official documentation:

flow_builder is a Flutter package which simplifies flows with a flexible, declarative API.

FlowBuilder is a widget that builds a navigation stack in response to changes in the flow state. onGeneratePages will be invoked for each state change and must return the new navigation stack as a list of pages.

FlowBuilder<Profile>(
  state: const Profile(),
  onGeneratePages: (profile, pages) {
    return [
      MaterialPage(child: NameForm()),
      if (profile.name != null) MaterialPage(child: AgeForm()),
    ];
  },
);

4. fluro.

According to the official documentation:

Fluro is a null-safe Flutter routing library that adds flexible routing options like wildcards, named parameters, and clear route definitions.

Fluro prides itself on having the following features:

Simple route navigation
Function handlers (map to a function instead of a route)
Wildcard parameter matching
Querystring parameter parsing
Common transitions built-in
Simple custom transition creation
Follows beta Flutter channel

While that is a list of package options, they are by no means the only options out there, and thus the choice solely depends on your particular use case.

References.

That was indeed all that I have to share for now. To all readers, cheers to code🥂, and have a blessed day.

State Management in Flutter.

Samuel Wahome — Fri, 07 Jan 2022 13:12:36 +0000

Managing state in an application is one of the most important and necessary processes in the life cycle of an application. The main job of a UI is to represent state. According to the official Flutter documentation:

In the broadest possible sense, the state of an app is everything that exists in memory when the app is running. This includes the app's assets, all the variables that the Flutter framework keeps about the UI, animation state, textures, fonts, and so on.

From this definition, we can then conclude that the pattern that programmatically establishes how to track changes and how to broadcast details about states to the rest of your app is known as state management.
The two state types that are normally considered are ephemeral state(also known as UI state or local state)and app state(sometimes also called shared state):

Ephemeral state is the state you can neatly contain in a single widget. Ephemeral state is used when no other component in the widget tree needs to access a widget's data. Examples include whether a TabBarView tab is selected or when tracking the current progress of a complex animation. In other words, there is no need to use state management techniques (ScopedModel, Redux, Provider, etc.) on this kind of state. All you need is a StatefulWidget.
State that is not ephemeral, that you want to share across many parts of your app, and that you want to keep between user sessions, is what is called application state. Application state when other parts of your app need to access a widget's state data. One example is an image that changes over time, like an icon for the current weather. Another example is when accessing login info that may be required in more than one section of your Flutter application.

Now that we've gotten the basic definitions out of the way, let's get to work exploring the various options we have at our disposal to manage the application state.

Managing state in a Flutter application.

1. InheritedWidget.

According to the official documentation:

InheritedWidget class is a base class for widgets that efficiently propagate information down the tree.

It's the basis for a lot of other state management widgets. If you create a class that extends InheritedWidget and give it some data, any child widget can access that data by calling context.dependOnInheritedWidgetOfExactType<class>().
Inherited widgets, when referenced in this way, will cause the consumer to rebuild when the inherited widget itself changes state.

class SampleWidget extends InheritedWidget {
  final Sample sample;
  SampleWidget(Key? key, required this.sample, required Widget child}) :
        super(key: key, child: child);

  @override
  bool updateShouldNotify(SampleWidget oldWidget) => sample!= oldWidget.sample;

  static SampleWidget of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<SampleWidget>()!;
}

One can then extract data from that widget. Since that's such a long method name to call, the convention is to create an of() method. Then a child widget, for example, a text field that displays the sample text, can just use:

SampleWidget sampleWidget = SampleWidget.of(context);
print(sampleWidget.sample.text);

An advantage of using InheritedWidget is it's a built-in widget so you don't need to worry about using external packages.

A disadvantage of using InheritedWidget is that the value of a Sample can't change unless you rebuild the whole widget tree because InheritedWidget is immutable. So, if you want to change the displayed sample text, you'll have to rebuild the whole SampleWidget.

2. Provider.

According to the official documentation:

Provider is a wrapper around InheritedWidget to make them easier to use and more reusable.

Provider was designed by Remi Rousselet to wrap around InheritedWidget, simplifying it. In short, Provider is a set of classes that simplifies building a state management solution on top of InheritedWidget.
Provider has several commonly used classes such as: ChangeNotifierProvider, Consumer, FutureProvider, MultiProvider , StreamProvider, etc.

ChangeNotifier
ChangeNotifier is a class that adds and removes listeners, then notifies those listeners of any changes. You usually extend the class for models so you can send notifications when your model changes. When something in the model changes, you call notifyListeners() and whoever is listening can use the newly changed model to redraw a piece of UI, for example.

ChangeNotifierProvider
ChangeNotifierProvider is a widget that wraps a class, implementing ChangeNotifier and uses the child widget for display. When changes are broadcast, the widget rebuilds its tree.

ChangeNotifierProvider(
  create: (context) => SampleModel(),
  child: <widget>,
);

Consumer
Consumer is a widget that listens for changes in a class that implements ChangeNotifier, then rebuilds the widgets below itself when it finds any. When building your widget tree, try to put a Consumer as deep as possible in the UI hierarchy, so updates don't recreate the whole widget tree.

Consumer<SampleModel>(
  builder: (context, model, child) {
    return Text('Hello ${model.text}');
  }
);

If you only need access to the model and don't need notifications when the data changes, use Provider.of, as shown below:

Provider.of<SampleModel>(context, listen: false).<method name>

listen: false indicates you don't want notifications for any updates. This parameter is required to use Provider.of() inside initState().

FutureProvider
FutureProvider works like other providers and uses the required create parameter that returns a Future.

FutureProvider(
  initialData: null,
  create: (context) => createFuture(),
  child: <widget>,
);

Future<SampleModel> createFuture() async {
  return Future.value(SampleModel());
}

A Future is handy when a value is not readily available but will be in the future. Examples include calls that request data from the internet or asynchronously read data from a database or network.

MultiProvider
What if you need more than one provider? You could nest them, but it'd get messy, making them hard to read and maintain. Instead, use MultiProvider to create a list of providers and a single child:

MultiProvider(
  providers: [
    Provider<SampleModel>(create: (_) => Model()),
    Provider<SampleDatabase>(create: (_) => Database()),
  ],
  child: <widget>
);

StreamProvider
Provider also has a provider that's specifically for streams and works the same way as FutureProvider. Stream providers are handy when data comes in via streams and values change over time like, for example, when you're monitoring the connectivity of a device, or listening to active changes from a network.

3. Riverpod.

According to the official documentation:

Rivepod can be considered as a rewrite of provider to make improvements that would be otherwise impossible.

Riverpod was written by Provider's author, Remi Rousselet, to address some of Provider's weaknesses. In fact, you'd be surprised to find out that Riverpod is in fact an anagram of Provider.
Riverpod is a very powerful state management library that allows you to:

Easily create, access, and combine providers with minimal boilerplate code.
Write testable code and keep your logic outside the widget tree.
Catch programming errors at compile-time rather than at runtime.

By design, Provider is an improvement over InheritedWidget and it depends on the widget tree. This leads to some drawbacks such as:

Combining Providers is very verbose.
Getting Providers by type and runtime exceptions.

To combat this, Riverpod is completely independent of the widget tree and doesn't suffer from any of these drawbacks.

4. Redux.

According to the official documentation:

Redux is a predictable state container for Dart and Flutter apps.

Redux uses concepts such as actions, reducers, views, and store, whose flow is shown below:

In summary, actions, like clicks on the UI or events from network operations, are sent to reducers, which turn them into a state. That state is saved in a store, which notifies listeners, like views and components, about changes.

5. BLoC.

According to the official documentation:

The goal of this package is to make it easy to implement the BLoC Design Pattern (Business Logic Component).This design pattern helps to separate presentation from business logic. Following the BLoC pattern facilitates testability and reusability. This package abstracts reactive aspects of the pattern allowing developers to focus on writing the business logic.

Think of it as a stream of events: some widgets submit events and other widgets respond to them. BLoC sits in the middle and directs the conversation, leveraging the power of streams.

6. MobX.

According to the official documentation:

MobX is a library for reactively managing the state of your applications. Use the power of observables, actions, and reactions to supercharge your Dart and Flutter applications.

MobX utilizes the following concepts in its functioning:

Observables: Observables represent the reactive-state of your application. They can be simple scalars to complex object trees.
Actions: Actions are how you mutate the observables. Rather than mutating them directly, actions add a semantic meaning to the mutations.
Reactions: They are the observers of the reactive-system and get notified whenever an observable they track is changed.

7. GetX.

According to the official documentation:

GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically.

GetX uses two different state managers: the simple state manager (GetBuilder) and the reactive state manager (GetX/Obx).

class SampleController extends GetxController {

     @override 
    void onInit() {
       // Here you can fetch you product from server
       super.onInit();
    }

    @override 
    void onReady() {
       super.onReady();
    }

    @override
    void onClose() { 
          // Here, you can dispose your StreamControllers
          // you can cancel timers
          super.onClose();
    }
}

References.

While that is a long list of state management options, they are by no means the only options out there, and thus the choice solely depends on your particular use case.
That was indeed all that I have to share for now. To all readers, cheers to code🥂, and have a blessed day.

View Binding in Android.

Samuel Wahome — Mon, 03 Jan 2022 16:31:14 +0000

If you're familiar with native Android app development with either Java or Kotlin, then you've probably needed a means by which to write code that interacts with your views, which would have probably been written in an XML layout file. Well, to make things simpler, that's where View Binding comes right in.

For starters, according to the official Android developer resource:

View binding is a feature that allows you to more easily write code that interacts with views.

Once view binding is enabled in a module, it generates a binding class for each XML layout file present in that module. An instance of a binding class contains direct references to all views that have an ID in the corresponding layout.
In most cases, view binding replaces findViewById. This simply means that you are essentially able to get rid of the excess boilerplate code.
Without wasting any more time, let's get straight to the code.

Setting it up.

Fun fact: You don't need to include any extra libraries to enable view binding, as it's built into the Android Gradle Plugin starting with the versions shipped from Android Studio 3.6 onwards. To enable view binding, configure viewBinding in your module-level build.gradle file.

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

Once enabled for a project, view binding will generate a binding class for all of your layouts automatically. The name of the binding class is generated by converting the name of the XML file to Pascal case and adding the word "Binding" to the end.
Once this is done, you can use the binding class whenever you inflate layouts such as Fragment, Activity, or even a RecyclerView Adapter (or ViewHolder).

View Binding in an Activity.

To set up an instance of the binding class for use with an activity, you have to perform the following in the activity's onCreate() method:

Call the static inflate() method included in the generated binding class. This creates an instance of the binding class for the activity to use.
Get a reference to the root view by either calling the getRoot() method or using Kotlin property syntax.
Pass the root view to setContentView() to make it the active view on the screen.

private SampleLayoutBinding binding;
private TextView categoryName;
private Button submitButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    binding = SampleLayoutBinding.inflate(getLayoutInflater());
    View view = binding.getRoot();
    setContentView(view);
    init();
}
private void init() {
    categoryName = binding.categoryName;
    submitButton = binding.submitButton;
}

Once this is done, you can now use the instance of the binding class to reference and utilize any of the views:

categoryName.setText(categoryList.get(category_index).getName());
submitButton.setOnClickListener(v -> submitTest());

View Binding in Fragments.

To set up an instance of the binding class for use with a fragment, you have to perform the following in the fragment's onCreateView() method:

Call the static inflate() method included in the generated binding class. This creates an instance of the binding class for the fragment to use.
Get a reference to the root view by either calling the getRoot()method or using Kotlin property syntax.
Return the root view from the onCreateView() method to make it the active view on the screen.

private SampleLayoutBinding binding;
private TextView categoryName;
private Button submitButton;

@Override
public View onCreateView (LayoutInflater inflater,
                          ViewGroup container,
                          Bundle savedInstanceState) {
    binding = SampleLayoutBinding.inflate(inflater, container, false);
    View view = binding.getRoot();
    init();

    return view;
}

private void init() {
    categoryName = binding.categoryName;
    submitButton = binding.submitButton;
}

@Override
public void onDestroyView() {
    super.onDestroyView();
    binding = null;
}

Once this is done, you can now use the instance of the binding class to reference and utilize any of the views:

categoryName.setText(categoryList.get(category_index).getName());
submitButton.setOnClickListener(v -> submitTest());

ViewBinding in a RecyclerView Adapter(or ViewHolder).

To set up an instance of the binding class for use with a RecyclerView Adapter, you need to pass the generated binding class object to the holder class constructor. In your example, you may have recipe_card XML file for RecyclerView item and the generated class is RecipeCardBinding .
Therefore, you need to use the onCreateViewHolder to pass the generated binding class to the ViewHolder class.

@NonNull
@Override
public CategoryAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    RecipeCardBinding itemBinding = RecipeCardBinding .inflate(LayoutInflater.from(parent.getContext()), parent, false);
    return new ViewHolder(itemBinding);
}

Once the above steps have been completed, you may then use the holder class like this so you can use these fields in onBindViewHolder.

static class ViewHolder extends RecyclerView.ViewHolder {
    private TextView textView;
    private ImageView imageView; 

    MyViewHolder(RecipeCardBinding itemBinding) {
        super(itemBinding.getRoot());
        imageView = itemBinding.img ;
        textView = itemBinding.txt ;
    }
}

All in all, View Binding is a pretty good solution when it comes to binding views as they are:

Type-safe: Properties are always correctly typed based on the views in the layout. So if you put a TextView in the layout, view binding will expose a TextView property.
Null-safe: This is applicable for layouts defined in multiple configurations. View binding will detect if a view is only present in some configurations and create a @Nullable property.

And since the generated binding classes are regular Java classes with Kotlin-friendly annotations, you can use view binding from both the Java programming language and Kotlin.

Differences between findViewById(), Butterknife, Kotlin Synthetics, DataBinding, and View Binding.

Resources.

In case you may need further information on View Binding or any of its alternatives, then these links will be of much help:

That was indeed all that I have to share for now✌. To all readers, cheers to code🥂, and have a blessed day.

FoodyShare: The Flutter Recipe sharing application.

Samuel Wahome — Wed, 15 Dec 2021 19:14:33 +0000

Hi there👋👋. It's definitely been a minute since I posted stuff on Flutter. It's definitely been a journey of sorts in terms of app development. Think of me as the sort of person who fell in love with coding, attended a Bootcamp, and is now freelancing while building interesting personal side projects.

My fascination with Flutter began when I saw a Twitter post by Onuoha Ifeanyi detailing how he had developed and published a Flutter music player app to the Google Play Store. And hearing all this talk about the framework, I decided to try it out and see how it would go.

And I do have to say, the journey has been long and interesting. However, that isn't the purpose of this blog and I will cover that in another segment. This blog's purpose is to talk about my latest project: FoodyShare. Without wasting any more time, let's get down to business.

The setup.

To program with Flutter, I did have to learn a bit of Dart, which was kinda not that difficult as its syntax is similar to that of Java and Typescript. The next step was downloading the Flutter SDK and setting up the necessary code editors. From then on it was tutorial after tutorial with a few additional exercises of course.

The idea.

One day I had the epiphany to build an app till the production phase and just get it out there, as the tutorials and sample exercises and projects were getting kinda boring, plus I did already have a Google Play Console account that I had purchased for 15$, and it was just sitting there, collecting dust. Looking through some food images on Pinterest, being the food junkie I am, I decided there and then to build a recipe social media app of sorts, not because it would be a revolutionary idea or anything of the sort; I just thought it would be interesting to see how users would interact with the app, or even if it would catch on at all. Ever since I wrote my first line of code, it has been my dream to have something out there that I actually made being used by people, and that's where FoodyShare comes in.
From the app name, I guess you can tell it involves food(Don't ask how I came up with the name😂).
The app's premise is simple: A user gets to view recipes from a general discover section, and if you're a more food category-specific person, then there are collections that contain a wide variety of food categories to choose from. The default app only has a select number of recipes to view at a time, hence one could increase the threshold and obtain the ability to view all recipes via in-app subscriptions.
With the idea and app name checked off my huge list, it was time to get right to the code.

The code.

All in all, version one of FoodyShare has taken me about three months to complete. In between those months, there have been productive, lazy, good, and bad days. Sometimes the code would run on the first try, other times it would take me a few hours to a day or two to resolve a bug. I can definitely say I've learned a lot about Flutter and programming after all the blood, toil, and sweat.
From the blog title, you can tell the app has been made with Flutter, the UI cross-platform framework from Google. In addition to that, the app utilizes Firebase for its backend, in terms of authentication, analytics, and database needs. Other libraries have also been extremely helpful in extending the application's features in terms of the user interfaces, animations, accessing native device features such as the camera, styling text, in-app payments, etc.
On matters of plugins, I have made a series that can be accessed right here. With all that said, I would like to add that the code is definitely nowhere near perfection, though I have made steps to gather knowledge and follow best practices where possible.

Testing.

Here's the fun part. Making sure the app functions for all or most use-cases, be it on small screens or even on extra-large screens, that text is formatted properly, and many other delightful tasks, definitely had me busy, ensuring that all objectives were met.
Not to mention unit tests, which are a developer's favorite hobby, had to be written and run to ensure that the app ran smoothly even as it continued to scale.

Preparing for launch.

After the app ideation, the code, and a bit of testing here and there, it was finally time to get it out there, on the Google Play Store to be more specific, though the App Store version will be coming out soon enough. Doing that involved generating an app icon, app screenshots, a feature graphic, and some catchy text of course. For the app icon, I found Canva to suffice my requirements, though there are obviously many other options.
For the app screenshots, I managed to find a nifty website that was intuitive, feature-packed, and definitely easy to use. For the feature graphic, I found this website to have many appealing templates to choose from, and generating it was also a piece of cake.

Further steps.

Now that the app is out there for the world to use, the next steps will definitely be to improve upon the app to improve the general user experience.
Of course, I'll be sure to follow up with another blog post detailing app performance, revenue generated, downloads, etc., after a period of time. My project endeavors have many inspirations, though I'd like to mention Ben Stokes and his tiny projects, which have been quite interesting, to say the least.
For now, it would definitely be a plus if you were able to download the app and tell me what you think of it.

That was indeed all that I have to share for now✌. To all readers, cheers to code🥂, and have a blessed day.

Flutter: Interesting widgets, part 3.

Samuel Wahome — Mon, 25 Oct 2021 14:45:01 +0000

Welcome one and all, to yet another blog article in this series where I outline various interesting Flutter widgets that I have discovered in my exploits with the framework. The first and second parts of the blog series can be found right here and here. Enough of the small talk, and let's get straight to the business at hand.

Visibility.

Ever wanted to show or hide widgets programmatically? Well then, look no further as the Visibility widget is one option that you can consider. The Visibility widget works by wrapping around a child widget and determining whether to show or hide a child.
By default, the visible property controls whether the child is included in the subtree or not; when it is not visible, the replacement child (typically a zero-sized box) is included instead.
With properties such as replacement, child, visible, etc, customizing the functionality of the Visibility widget has never been easier.
In case of any further queries, then this blog post should be of much help.

RotatedBox.

Need to design a custom layout where a widget needs to be rotated about its own axis? Well, look no further as to the RotatedBox widget. This widget works by rotating its child by an integral number of quarter turns, with each quarter turn being equal to 90 degrees. Unlike Transform, which applies a transform just prior to painting, this object applies its rotation prior to layout, which means the entire rotated box consumes only as much space as required by the rotated child.
With properties such as quarterTurns, etc, one can customize how the RotatedBox widget and its child are rendered during runtime.
In case of any further queries, this video should be of much help.

CircleAvatar.

Ever needed to represent a user's profile image in a circular manner. While there are many workarounds out there, the CircleAvatar widget is definitely one good option that you may consider. The CircleAvatar widget is simply a circle that represents a user.
Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background color, for consistency.
With properties such as backgroundColor, backgroundImage, foregroundColor, radius, etc, one can customize how the CircleAvatar widget is rendered.
In case of any further queries, then this video should be of much help.

FutureBuilder.

Ever needed to listen to a one-time response from a network? Well then, the FutureBuilder widget may be just what you've been searching for. In short, it is simply a widget that builds itself based on the latest snapshot of interaction with a Future.
With properties such as builder, future, etc, one can easily customize how the FutureBuilder widget is rendered.
In case of any further queries, then this video and discussion concerning the difference between FutureBuilders and Streambuilders should be of much help.

Center.

Ever needed to center a widget within its specific constraints. Then I do believe the Center widget may be just what you have been searching for. The Center widget works by centering its child within itself.
In case of any further queries, then this video should be of much help.

PageView.

Ever thought of creating multiple screens with animations, then making them swipeable, such as when designing an onboarding feature of sorts? Well then, look no further as the PageView widget may be just what you are looking for.
A PageView is simply a scrollable list that works page by page. It is also important to note that each child of a page view is forced to be the same size as the viewport.
With various constructors such as builder, custom, etc, one can easily customize how the PageView widget is rendered. In case of any further queries, then this video should be of much help.

CircularProgressIndicator.

Ever needed your app to show that something is still being loaded in the background? Well then, the CircularProgressIndicator widget is simply one option that may just suit your specific use case.
A CircularProgressIndicator widget is simply a material design circular progress indicator, which spins to indicate that the application is busy.
With properties such as backgroundColor, strokeWidth, etc, one is able to customize how the CircularProgressIndicator widget is rendered. In case of any further queries, then this video should be of much help.

TweenAnimationBuilder.

You've heard how animation is at the core of Flutter's philosophy. Looking for a widget that enables you to animate other widgets? Well, look no further as the TweenAnimationBuilder widget may be just what you are looking for. It is simply a widget builder that animates a property of a Widget to a target value whenever the target value changes.
With properties such as child, tween, builder, etc, one can easily customize how the TweenAnimationBuilder widget is rendered.
In case of any further queries, then this video should be of much help.

MediaQuery.

Designing an app that needs to dynamically cater for changing screen sizes such as when in portrait or landscape mode, or perhaps designing an app both for normal mobile phones and tablets? Then the MediaQuery widget may be just what you are looking for.
The MediaQuery widget works by establishing a subtree in which media queries resolve to the given data. For example, to learn the size of the current media (e.g., the window containing your app), you can read the MediaQueryData.size property from the MediaQueryData returned by MediaQuery.of: MediaQuery.of(context).size. Querying the current media using MediaQuery.of will cause your widget to rebuild automatically whenever the MediaQueryData changes (e.g., if the user rotates their device).
In case of any further queries, then this video should be of much help.

Tooltip.

Ever felt that the icons and/or images you use in your app are a bit obscure in terms of meaning? Then the Tooltip widget may be just what you are looking for.
Tooltips provide text labels that help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget and provide a message which will be shown when the widget is long pressed.
Many widgets, such as IconButton, FloatingActionButton, and PopupMenuButton have a tooltip property that, when non-null, causes the widget to include a Tooltip in its build.
Tooltips improve the accessibility of visual widgets by proving a textual representation of the widget, which, for example, can be vocalized by a screen reader.
With properties such as decoration, margin, message, etc, one is easily able to customize how the ToolTip widget will be rendered.
In case of any further queries, then this video should be of much help.

That was indeed all that I have to share for now✌. To all readers, cheers to code🥂, and have a blessed day.

Flutter: Interesting widgets, part 2.

Samuel Wahome — Mon, 18 Oct 2021 06:21:48 +0000

Welcome one and all to yet another edition of this blog series, that revolves around interesting yet useful Flutter widgets that I've encountered in my exploits with the framework. The first part of this series can be found right here. Enough of the pleasantries, and let's cut straight to the chase.

Icon.

Ever need to render icons in your app? Well, look no further as this widget definitely has your back. Simply put, the Icon widget is a graphical icon widget, that is able to draw icons as described in its icon property, that accepts an IconData class, which is a description of an icon fulfilled by a font glyph.
This widget has other properties that can be modified, such as size and color, all in order to make the UI even more appealing. It is important to note that Icons are not interactive, hence would need to be wrapped with other interactive widgets, or one may also consider material's IconButton, which does that work just as efficiently.

Text.

This widget is responsible for displaying a string of text, but with a single style. This widget has various properties such as data, maxLines, overflow, style, textAlign, and others that are used to customize how a Text widget is rendered on the screen.
It is important to note that the Text widget is not interactive, hence to make Text react to touch events, wrap it in a GestureDetector widget with a GestureDetector.onTap handler. In a material design application, consider using a TextButton instead, or if that isn't appropriate, at least using an InkWell instead of GestureDetector. To make sections of the text interactive, use RichText and specify a TapGestureRecognizer as the TextSpan.recognizer of the relevant part of the text.

RichText.

This widget is also responsible for displaying text. However, the RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree.
This widget also has various useful properties such as children, maxLines, overflow, text, textAlign, etc, that can be used to customize how the RichText widget is rendered on the screen. For more information, this video will definitely be of much help.

Streambuilder.

According to the official documentation, the Streambuilder widget is simply a widget that builds itself based on the latest snapshot of interaction with a Stream. This widget is especially useful when retrieving data asynchronously from a source, and displaying that data via the use of other widgets.
This widget has various properties such as builder, initialData, stream, etc, that define how a new Streambuilder widget is built.
For more information on this widget and streams in general, then this and that video should be of much help.

ListTile.

Ever wanted your app's list display to follow material design guidelines, or you just couldn't find the right combination of widgets to create a whole other widget to be displayed in a list? Well, here comes the ListTile widget that solves just that predicament.
A ListTile widget contains one to three lines of text optionally flanked by icons or other widgets, such as check boxes. The icons (or other widgets) for the tile are defined with the leading and trailing parameters. The first line of text is not optional and is specified with title. The value of subtitle, which is optional, will occupy the space allocated for an additional line of text, or two lines if isThreeLine is true. Note that leading and trailing widgets can expand as far as they wish horizontally, so ensure that they are properly constrained. List tiles are typically used in ListViews, or arranged in Columns in Drawers and Cards.
This widget has various properties such as contentPadding, enabled, hoverColor, leading, onTap, selected, shape, subtitle, etc, that define how the ListTile widget is rendered on the screen.
In case of any further queries, then this video should be of much help.

RefreshIndicator.

Ever needed to create the 'swipe to refresh feature'? Well, look no further as this has been the widget that you've definitely been searching for. A RefreshIndicator in simple terms, is a widget that supports the Material "swipe to refresh" idiom.
When the child's Scrollable descendant over scrolls, an animated circular progress indicator is faded into view. When the scroll ends, if the indicator has been dragged far enough for it to become completely opaque, the onRefresh callback is called. The callback is expected to update the scrollable's contents and then complete the Future it returns. The refresh indicator disappears after the callback's Future has completed.
It is also important to note that a RefreshIndicator can only be used with a vertical scroll view.
This widget has various properties such as backgroundColor, color, displacement, onRefresh, child, etc, that define where and how the RefreshIndicator widget shall be rendered on the screen.
In case of further queries, then this video should be of much help.

ClipRRect.

Need a rounded rectangle shape on a widget? Well, look no further as the ClipRRect widget is definitely what you've been searching for. In simple terms, this widget works by clipping its child using a rounded rectangle.
With properties such as borderRadius, etc, one can customize how this widget is rendered on the screen.
In case of any further queries, then this video should be of much help.

Expanded.

Ever needed a child widget in a Row, Column, or Flex to fill and occupy any extra space? Then the Expanded widget is definitely what you've been searching for. If multiple children are expanded, the available space is divided among them according to the flex factor.
With properties such as child, flex, etc, one can define how this widget is rendered on the screen.
In case of any further queries, then this video should be of much help.

Padding.

Need to add some extra space around a widget? Well, look no further as the Padding widget may be just what you need. The Padding widget works by insetting its child by the given padding.
With its properties such as child, padding, etc, one can customize how the widget is rendered on a screen.
In case of any further queries, then this video should be of much help.

GridView.

Ever needed to display items in a grid format? Well, look no further as the GridView widget may be just what you are looking for. A grid view is simply a scrollable, 2D array of widgets. With its various constructors such as builder, count, custom, extent, etc, one is able to customize the functionality of the resulting grid.
In case of any further queries, then this video should be of much help.

That was all that I had to share for now✌. To all readers, cheers to code🥂, and have a blessed day.

Flutter: Interesting packages, part 3.

Samuel Wahome — Tue, 28 Sep 2021 11:07:21 +0000

Welcome one and all to yet another edition of this blog series, that revolves around flutter packages that can and may be included in your individual flutter projects. The first and second parts can be found right here and here. Finally, enough of the niceties and let's cut to the chase.

1.video_player

Need to include video playback functionality in your flutter app, well look no further than this, as the Flutter dev team has your back with this awesome plugin. It is able to display videos by integrating with ExoPlayer and AVPlayer for Android and iOS specifically. As much as it is a great package, the tooling isn't exactly a piece of cake, as one would be required to build their own custom controls for volume, playback speed, and everything in between. Plus SRT is the only subtitle format it supports at the moment, hence this plugin does have some improvements that should be considered in the near future.
Other than that, if your needs aren't that complex, then this package is definitely a good recommendation for you.

2.chewie
Enough judgment of the video_player plugin, as it may have just found a suitable companion. Long story short, chewie simply wraps around the video player plugin and adds custom controls that you can easily adjust to your liking, resulting in a unique and positive user experience. In case you do need a bit of help integrating both chewie and video_player in your flutter app, this post by Shaiq khan should be of much help. Therefore, this package is definitely a good recommendation.

3.url_launcher
Ever required your flutter to handle URLs? Well, then this package may be just what you need to accomplish just that. This package supports a wide variety of URL schemes, both on Android and iOS, hence this package definitely has your back. All in all, this package is definitely a good recommendation for all interested flutter developers out there.

4.flutter_blurhash
Ever required a placeholder for an image that may be loaded from storage or a network? Then this package may be just what you need for that very purpose. I know that I've mentioned transparent_image somewhere in one of my other posts. Well, this package simply serves as an alternative to that, depending of course, on your preferences or specific use-case. In case you do need help incorporating this package, then this blog post should be of much help. All in all, this package is definitely a good recommendation.

5.flutter_bloc
All this talk about state management, then suddenly bloc pops into the fray. In addition to other solutions out there such as provider, flutter_bloc simply enables you to share application state between screens, and across your app. Therefore, depending on your specific use case, then this package is definitely a good recommendation.

6.share_plus
Do you require your flutter application to be able to share content with other apps, much like implicit intents in android? Well, look no further as this package definitely has your back. This package enables you to share files, text, and links with ease, and also invokes the share dialog on your behalf, so it definitely has you covered. All in all, this package is definitely a worthy recommendation.

7.device_info_plus
Do you need to collect information on the specific device your application is running on, perhaps for analytical or debugging purposes? Well, look no further as this package may just be what you need. With this package, you are able to get current device information from within the Flutter application and is supported on most platforms, which is definitely a huge plus. All in all, this package is definitely a good recommendation.

8.sign_in_with_apple
Are you a flutter dev that needs an authentication service that is specific to Apple device users, specifically via their Apple ID? Then this package may be just what you need. Implementing this functionality goes beyond just importing this package in your app, but the official package docs do a good job of simplifying the process to ensure a smooth user experience. All in all, this package is definitely a worthy recommendation.

9.android_alarm_manager_plus
Ever needed to include an alarm clock-like functionality in your Flutter application? Then this package may be just what you are looking for. This package works by accessing the android AlarmManager service, then runs some dart code underneath to extend even more control to your Flutter app.
With that said, there is one catch though, as this package only caters to the android platform, which kinda beats the logic of designing an app that can work on more than one platform. Anyways, this package is still definitely a worthy recommendation to all who may need it.

10.infinite_scroll_pagination
All this talk about efficiently retrieving information from databases and suddenly pagination pops into mind. Need a package for this exact use case? Well, look no further as this package may be just what you need. Call it auto-pagination, lazy loading pagination, progressive loading pagination, or endless scrolling pagination, then this package definitely has your back, and is also a worthy recommendation to all who may need it.

I guess that has been a lot to swallow😂. All the afro mentioned packages have null safety incorporated into them, hence no worries about incompatibility with recent versions of Flutter. If you've loved this post, leaving a like❤ won't hurt one bit.
To all readers, cheers to code🥂, and have a blessed day.