DEV Community: Baimam Boukar Jean Jacques

Getting Started with AWS SAM by deploying a simple Serverless Application

Baimam Boukar Jean Jacques — Mon, 10 Jul 2023 17:32:10 +0000

Do you feel slowed down by the time and effort required to manage servers and infrastructure for your application? Are you searching for a simpler way to develop and deploy your applications faster? AWS Serverless Application Model is here for you. In this article, we’ll introduce SAM and show you how to deploy a simple serverless app.

Serverless computing is quickly becoming a popular choice for building and deploying applications in the cloud. With serverless computing, developers can focus on writing code and building applications without having to worry about managing servers, infrastructure, or scaling. AWS Lambda, the leading serverless computing service, has made it easy for developers to build and deploy serverless applications on AWS. However, managing the infrastructure for these applications, and ensuring everything align with best practices can still be complex and time-consuming. And this is where the AWS SAM (Serverless Application Model) fits in.

What is AWS SAM ?

AWS SAM (Serverless Application Model) is a framework that simplifies the process of building serverless applications on Amazon Web Services (AWS).

It makes it easier for developers to develop, test, and deploy serverless applications on AWS. By providing a standardized way to define and manage the resources required by an application , AWS SAM streamlines the development process and helps ensure that the application is scalable, reliable, secure and follow best practices.

This framework allows developers to define the various resources their application needs, such as APIs, functions, and tables, using a YAML or JSON file. For example it can provide a simplified way to define the AWS API Gateway APIs, AWS Lambda functions, and Amazon DynamoDB tables needed by your serverless application.

Some cool things about AWS SAM

With AWS SAM, you can define the resources your application needs using a YAML or JSON file, making it easy to share and version control with other developers
It supports popular programming languages such as Python, Node.js, Go and Java , and has many templates that will hep you to quickly get started.
Integration with AWS Services : AWS SAM integrates with other AWS services, such as Amazon S3, Amazon Kinesis, and Amazon SNS. This allows developers to build complex serverless applications that leverage multiple AWS services, without having to manually configure each service.
Local Development and Testing : AWS SAM supports local development and testing, allowing developers to test their serverless applications locally before deploying them to the cloud. This helps ensure that the application is running as expected, and helps catch any issues before they are deployed to production.
Single, reliable and automated deployment: AWS SAM organizes and deploy related resources together as a single, versioned entity. It is an extension of AWS CloudFormation , which means that developers can leverage CloudFormation’s reliable deployment capabilities. With the SAM CLI , developers can easily deploy their applications to AWS, or create secure CI/CD pipelines that follow best practices and integrate with AWS’ native and third-party CI/CD systems.

Now Let’s practice a bit: Deploying a simple severless app on AWS

Now that you know what SAM is, let’s put it into practice by deploying a simple serverless application. We’ll walk through the steps of deploying a serverless app that displays a poem about AWS SAM 😂.

To get started, we’ll use AWS Lambda to execute our code and Amazon API Gateway to handle incoming requests. By following the steps outlined in this tutorial, you’ll see just how easy it can be to build and deploy serverless applications with SAM. So, let’s dive in!

Installing SAM CLI

To get started, we need to install the AWS SAM CLI.

Windows: Download and install AWS SAM CLI for windows here.
MacOS: If you’re running on MacOS, you can get the package installer for Intel(x86_64) or forApple (arm64)

After installing, run this command to make sure it works well

sam --version

It should display SAM CLI, version

Configuring the serverless application

Let’s create our serverless app and get it ready for deployment

Create a new directory for the project

mkdir serverless-app
cd serverless-app

Create the Lambda handler

Create a new file called poem.py and add the following code

import json
def handler(event, context):
    poem = '''
   Roses are red,
   Violets are blue,
   AWS Serverless,
   Is the way to go, too.

   No more servers to manage,
   No more scaling to do,
   AWS takes care of it all,
   So you can focus on code.

   Lambda functions and API Gateway,
   DynamoDB and more,
   AWS Serverless has it all,
   For your app to truly soar.

   So if you want to build,
   An app that's fast and lean,
   Choose AWS Serverless,
   And you'll be a development machine.
   '''
    json_poem = json.dumps({"statusCode": 200, "poem": poem})
    return {
        "isBase64Encoded": False,
        "statusCode": 200,
        "headers": {"Content-Type": "application/json"},
        "body": json_poem
    }

Create the SAM template file

Resources:
  PoemFunction:
    Type: "AWS::Serverless::Function"
    Properties:
      Handler: poem.handler
      Runtime: python3.8
      CodeUri: .
      Description: A Lambda function that returns a poem
      MemorySize: 128
      Timeout: 10
      Events:
        PoemApi:
          Type: Api
          Properties:
            Path: /poem
            Method: GET

This configuration defines an AWS Lambda function called PoemFunction and an API Gateway endpoint called PoemApi that triggers the function when accessed with a GET request to _/poem._

Deploying the Serverless app to AWS

The moment has arrived to deploy our serverless application! Let’s get it up and running 🤹‍♂️

Package the app 📦

sam package --template-file template.yaml --output-template-file packaged.yaml --s3-bucket serverless-app-bucket --region us-east-1

This command packages your AWS SAM application and uploads it to an auto-created S3 bucket. It creates a new CloudFormation templat e that includes the S3 location of the packaged application.

Deploy 🚀

sam deploy --template-file packaged.yaml --stack-name serverless-app --capabilities CAPABILITY_IAM

This command deploys your AWS SAM application to AWS CloudFormation. It creates a new CloudFormation stack and deploys the packaged application to the stack.

Test 🧪

After the deployment is complete, open the AWS Console.
Navigate to the AWS API Gateway service and select the API that was created by AWS SAM.
Click on the “Stages” tab and find the URL for the deployed API.
Open a web browser and navigate to the URL. You should see the poem displayed in the browser.

Congratulations 🎉! You’ve successfully deployed a simple serverless app with AWS SAM.

I hope this tutorial has been helpful in discovering and guiding you through the process of deploying a serverless application with AWS SAM. If you encounter any errors or issues that you cannot troubleshoot on your own, don’t hesitate to leave a comment.

Deploy static websites to AWS S3 via CI/CD with GitHub Actions

Baimam Boukar Jean Jacques — Sun, 09 Jul 2023 20:13:47 +0000

S3 is a powerful and reliable storage service offered by AWS Cloud. It can be used to host static websites with ease. In this article, we will show you how to deploy your static content to AWS S3 using GitHub Actions. This will allow you to automate the deployment process and ensure that your website is always up-to-date.

What is AWS S3?

AWS S3 stands for Amazon Simple Storage Service. It is a cloud storage service that offers industry-leading scalability, data availability, security, and performance.

S3 has tons of use cases amongst which we have Media Storage, Data Lake, Backup and archiving, and Static website hosting.

Create S3 Bucket

To host our static website, we will need to create a S3 bucket. There are many ways to do this. Via AWS console,AWS CLI, AWS SDKs or REST APIs. But for the purpose of this tutorial,we will use AWS console.

Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/
Then type S3 in the search bar and chose the first result, standard S3.

Create a bucket

After opening S3 view, click on “Create Bucket” and configure your bucket as follow:

Bucket name: Give a unique name to your bucket
Region: Select the AWS region in which you want to create your bucket

Unblock public access

By default, AWS blocs all unauthorized access. But we have to allow public access in order for the hosted static website to be publicly available.

To do so, just uncheck the “Block All Public Access” checkbox.

After unchecking, scroll down and click on “Create Bucket”. Wait for few seconds and after successful operation, you should see your created bucket

Enable Static Website Hosting

Now that we have our bucket created, we have to enable AWS S3 static website hosting on the bucket.

Navigate to the permissions tab
Scroll way down (bottom-most section of the page)
Then you should see “Static Website Hosting” section
Click on “Edit” and Enable static webste hosting

In Index document, enter the file name of the index document, typically index.html.
The index document name is case sensitive and must exactly match the file name of the HTML index document that you plan to upload to your S3 bucket. When you configure a bucket for website hosting, you must specify an index document. Amazon S3 returns this index document when requests are made to the root domain or any of the subfolders.
To provide your own custom error document for 4XX class errors, in Error document, enter the custom error document file name. The error document name is case sensitive and must exactly match the file name of the HTML error document that you plan to upload to your S3 bucket.

Update Bucket Policy

Locate your bucket and open it
Navigate to “Permissions” tab and scroll down to “Bucket Policy”
Click on edit and paste this json data

  {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadGetObject",
                "Effect": "Allow",
                "Principal": "*",
                "Action": [
                    "s3:GetObject"
                ],
                "Resource": [
                    "arn:aws:s3:::<Bucket-Name>/*"
                ]
            }
        ]
    }

Don’t forget to change with your real bucket name at the level of “Resource” key, arn:aws:s3:::<Bucket-Name>/*. For exmaple if your bucket name is “static-websites-with-github-actions”, It should be “ arn:aws:s3:::static-websites-with-github-actions/* ”

Generate Access Keys

Now that we have our S3 bucket pretty fine and well configured, we need to generate access keys to be able to perform CI/CD from Github Actions.

Note that to generate access keys, you need IAM account with administrative roles.

On your AWS Console dashboard, click your username
Then click on the option Security Credentials.
On the Your Security Credentials page, expand the **Access keys (access key ID and secret access key) **tab.
Click on the Create New Access Key button.
An access key with its secret should be generated for you

Note that we will need this access key to configure our CI/CD with Github Actions later.

Create Simple Website

Now we’re ready to cook the website that will host on AWS S3. To KISS (Keep It Simple and Stupid), let’s create a simple webpage that displays current Date and Time in the user’s time zone.

Here is the content of the index.html page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hosting on AWS S3</title>
  </head>
  <body>
    <center>
      <h1>UP AND RUNNING ON AWS S3</h1>
    </center>
    <p id="date"></p>
    <footer>
      <center>
      <a href='https://github.com/baimamboukar/'>
        by @baimamboukar
      </a>
        </center>
    </footer>
  </body>
  <style>
    body {
      text-align: center;
      background-color: #f2f2f2;
    }

    h1 {
      color: #333333;
    }

    p {
      font-size: 20px;
      color: #dd0808;
      font-weight: 600;
    }
    a{
      text-decoration: none;
      color: 'green';
    }
    footer{
      background-color: 'black';
      height: 75px;
      width: 100%;
      position: fixed;
      bottom: 0px;
    }
  </style>
  <script>
    function getCurrentDateTime() {
      var currentDateTime = new Date();
      var formattedDateTime =
        "Your local datetime is: " + 
        currentDateTime.toDateString() +
        ", " +
        currentDateTime.toLocaleTimeString();
      return formattedDateTime;
    }
    document.getElementById("date").innerHTML = getCurrentDateTime();

    setInterval(function () {
      document.getElementById("date").innerHTML = getCurrentDateTime();
    }, 1000);
  </script>
</html>

You can go to this repository and fork complete repo to have all files.

GitHub - baimamboukar/hosting-static-website-on-aws-S3-with-github-actions: Practicing static website hosting on AWS S3

When everything is OKAY, push the files to a Github repository which I assume you already created.

Configuring CI/CD with Github Actions

Our Github Action workflow will be responsible of deploying the content of our repository (basically our website) to AWS S3 whenever the repository receives a commit-push. This will ensure that our live website is always up-to-date.

On your repository that contains the website, navigate to “Actions” tab
On the left sidebar, click on “New Workflow”
And click on “Set up a workflow yourself”
Give a name to your workflow file. The default name is “main.yml”. You can change it or allow the default one.
The paste this content inside the workflow

name: deploy static website to AWS-S3

on:
  push:
jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up AWS CLI
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1

      - name: Deploy to AWS S3
        run: |
          aws s3 sync . s3://<your-bucket-name> --delete

Again, make sure you replace with the bucket name you created earlier. Also, the “aws-region” value should be the region in which you created your bucket

Well, you have surely noticed something. We have secrets in the workflow: AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.

These secrets are not “Ex-Nihilo”, meaning they are out coming out of anywhere.

So let’s configure these secrets.

Configuring Github Environment Secrets

Remember the Access key we created earlier? Its time is NOW!

In your github repository that contains the website, go to Settings tab
Scroll down to “Secrets and Variables” in the left sidebar and click on it
Choose “Action” option
Click on “New repository secret”
Then give the name “ AWS_ACCESS_KEY_ID” to your variable
Repeat the first three steps of “Generate Access Keys” section to view the access key you created
Copy its content and paste it, as value for AWS_ACCESS_KEY_ID
Click on “Add secret” to save the secret variable
Do the same to create the “ AWS_SECRET_ACCESS_KEY”. Make sure you copied the real value of the key’s secret, not key ID

Trigger CI/CD and View the Deployment URL

At this point, we are all set to trigger the CI/CD in order for our workflow to run and deploy to AWS S3.

To do so, we need to push a commit to our repository. So let’s update something the title tag of our index.html to

<title> CI/CD to AWS S3 </title>

Then we commit and push to the repository.

This push will trigger our CI/CD workflow and deploy the last commits to AWS S3.

To view the deployment URL pattern is

http://<bucket-name>.s3-website-<bucket-region>.amazonaws.com/

Make sure to replace “” and “” respectively with the name of your bucket and region in which you created it.

This is for instance, my deployment URL

Hosting on AWS S3

When you click on the link, you should see something like this:

Congratulations, You have just deployed a static website to AWS S3 using CI/CD with Github actions 🎉🎉🎉

You may want to link a custom domain name to your S3-hosted website. If that is the case, you can check out my article on how to configure a custom domain name for a S3-Hosted static website.

Configure a custom domain name for an S3-hosted static website using AWS Route 53

Thanks for reading, and I hope this content was helpful to you. Let’s stay connected for more.

Cloud Computing 101: Why, What and How

Baimam Boukar Jean Jacques — Sun, 09 Jul 2023 12:59:55 +0000

Cloud and Cloud Computing 101: Why, What and How

“There is no cloud, it is just someone else’s computer.” oversimplifies the concept of the cloud, but it is important to understand that the cloud is much more than just someone else’s computer. We discuss why cloud computing exists, what it is offering and how it works, to better understand “What is Cloud computing?”

There is no cloud; it is just someone else’s computer

In today’s digital age, you often hear the phrase_,_ ”There is no cloud, it is just someone else’s computer.” While this statement carries an element of truth and oversimplifies the concept of cloud computing, there is also a problem. This completely misses the point. It focuses your attention on the wrong thing. Let’s be clear with this: the statement “ There is no cloud; it is just someone else’s computer” is somehow neglectful, dismissive, and minimizing. Like

The cloud — what’s it about?
Nooo… no big deal, just someone else’s computer

This just makes us underestimate how important the cloud already is, and how promising it is, for the future of technology.

There is a STATISTIA report that talks about the yearly revenue of commercial Public clouds. Commercial Cloud services are now on track to hit $ 500B+ yearly revenue by 2025. This just confirms that there is something huge there.

So, Is cloud or cloud computing vague and very ambiguous? Yes! Yes It is. But to better understand ’What is Cloud Computing?” and its importance, we need to get clear on some terminologies and some terms of cloud computing jargon like IaaS, PaaS, SaaS, On-demand delivery over the internet, etc., and understand what cloud service providers are offering and how we are benefiting from these services.

First things first

We need to begin at the beginning. What do we exactly mean when we say cloud or cloud Computing ? Can we even be exact about those terms ?

This really goes beyond Just understanding a few pieces of technical terminology Because if you want to go beyond that and actually feel fluent and comfortable when you’re talking about Cloud, you should understand it in these four main perspectives:

Personal : How could you, just you, get more out of this ?
Team : Now, widen your thinking and see how this can apply to your team.
Business : In the same perspective, think about how it can help your organization
Customers : Then push into that perspective and think about how this can solve the problems of your clients or customers.

And it is from combining these little technical understandings and a good awareness of the various audiences, that we can get a real sense of What Cloud Computing is , how you can use it in different situations and contexts, and why it is becoming crucial for almost all businesses. Because there is a Cloud, and it is much more than Just someone else’s computer.

Different use cases, same benefits

Usually, when we want to understand a technology, we tend to try to understand one or two examples, and that’s fine. But we don’t have that here. And the reason is that this is the best way to get confused about What Cloud computing is.

Let’s imagine we have four people from different walks of life, who are well informed about what cloud computing is and who are using it every single day. And we ask them, “Why are you using the cloud?”

This will just not make any sense to someone who is not informed about cloud computing. Because these are four descriptions of four unrelated things.

But indeed, they are all right! Now imagine if we see cloud computing from just the perspective of a student or a Software developer. We would have had a very narrow and limited understanding of what cloud computing is.

This is the key to getting started. The use cases of cloud computing can be extremely different between individuals and across teams or organizations. This is why cloud computing is a bit tricky to understand and very difficult to define. It evades this kind of simple and straightforward description like “Cloud computing is for doing this or Cloud computing is for doing that”.

But we can get a better understanding by asking additional questions on the use cases of various profiles of people, like, Can’t you do that already?, without the cloud ? Yes! We can do all of these, but with much more cool benefits. And this is where the four main benefits of the cloud come in:

By adding cloud computing, all these use cases become Cheaper, easier, and Faster. We will also be able to do other things that we couldn’t just do before — something that was technically impossible, time-consuming, or so costly to implement that we could never do it.

But here is the thing, moving to the cloud is not an instant guarantee that everything will become easier, faster, and cheaper. No! No, because these four benefits can be prioritized differently. For some organizations, for example, the top priority will be Speed , reducing time to market and doing things faster than ever before. In other organizations, the priority may be Cost.

Now that we have a better understanding of why the cloud is so important, let’s deep dive into cloud services to understand What the cloud is about and what it is offering.

Everything as a Service

There are thousands of cloud service providers out there, like Amazon Web Services, Google Cloud, Microsoft Azure, Oracle Cloud, Alibaba Cloud, etc,.

The list seems endless, with providers targeting individuals , enterprises , and small businesses. Some even focus on specific industries like healthcare , transportation , music , or education.

But regardless of the provider, there is a framework to categorize the services offered by these providers. By identifying the “Something as a Service” (XaaS) nomenclature, one can discern the primary category of the service being offered.

These are Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). You might also come across terms like Backend as a Service (BaaS), but these are just sub-categories that fall under one of the three main types we mentioned.

Infrastructure as a Service (IaaS) is like renting a fully equipped office space instead of buying all the furniture, computers, and equipment yourself. You can access virtual machines, storage, and networks provided by a cloud service provider over the internet. The provider takes care of all the underlying infrastructure, such as servers and data centers, while you have the flexibility to scale your computing power as needed without worrying about maintenance or upfront costs.

Platform as a Service (PaaS) is like renting a ready-to-use kitchen in a restaurant instead of building one from scratch. With PaaS, developers can focus on creating and deploying applications without the hassle of setting up and managing the underlying infrastructure. The cloud provider takes care of the servers, storage, and operating system, while providing tools and services that make coding and deployment easier. It’s like having a fully equipped kitchen where you can start cooking right away, without worrying about buying or maintaining the appliances.

Software as a Service (SaaS) is like subscribing to a streaming service to watch movies instead of buying DVDs or downloading them. With SaaS, you can access software applications directly through a web browser or dedicated app, without needing to install or update anything on your computer. The provider hosts the software on their servers and takes care of maintenance and updates, while you can simply use the application and access your files from anywhere with an internet connection. It’s like having access to a library of software that you can use whenever you need it, without the hassle of installation or management.

In simple terms, IaaS provides the basic infrastructure components, PaaS offers a complete development environment, and SaaS gives you ready-to-use software applications, all accessible through the cloud without the need for upfront investments or technical expertise.

Now that we have explored what services are offered by cloud service providers and how we are benefiting from these services, let’s have a look at “how.”

Delivered over the Internet

Cloud services are delivered over the internet. Cloud service providers have large data centers that host numerous powerful servers. These servers are connected to the internet through high-speed networks, ensuring a reliable and fast connection. The data centers are strategically located in various regions to ensure optimal performance and high availability.

When you interact with cloud services, such as storing files, running applications, or using online software, your data is securely transmitted over the internet to the provider’s servers. The servers process your requests and deliver the requested services or data back to your device via the internet.

Cloud service providers take measures to ensure the security and privacy of your data during transmission. They may use encryption, which is like putting your data in a secure digital envelope, to protect it from unauthorized access.

The internet acts as the medium that enables the delivery of cloud services, allowing users to seamlessly access and utilize resources and applications hosted remotely. It provides the connectivity that makes it possible for individuals and businesses to leverage the benefits of cloud computing from anywhere, at any time, with just an internet connection.

What is Cloud Computing ?

Cloud computing does not have a single, universally accepted definition. The interpretation of cloud computing can vary depending on the target audience, whether it’s individuals, teams, or businesses, as we have seen earlier.

The concept of cloud computing is dynamic and evolving, with new services and use cases emerging constantly. But with the context that we develop above, It will now make much more sense to say that cloud computing is the delivery of on-demand computing, storage, or software resources over the internet, providing scalability, flexibility, and cost-effectiveness to businesses, teams, and individuals while relieving them from the complexities of infrastructure management and software maintenance.

Thanks for reading! And I hope you’re now convinced that the cloud is much more than Just someone else’s computer.

Add dynamic theming support to your flutter apps with no stress

Baimam Boukar Jean Jacques — Fri, 16 Dec 2022 02:01:52 +0000

In this post, I show you a really simple three-step process for implementing dynamic theming or a light/dark mode switch in your flutter apps with little worry.

Adding hive to your project
Initialize hive_flutter and open a hive box
Listen to theme mode changes
Add switch widget to change theme mode

_Integrating a light-dark mode option in a Flutter app can be a nightmare. Having to handle providers and shared preferences, as well as loading configurations when the app launches, is quite difficult. But there is good news: in this post, we will learn and explore a straightforward technique to easily create a dynamic theming system for your Flutter app. Let’s get started _🔥

showase

1. Adding hive to your project

To begin, add the hive_flutter package to the flutter project that you want to make theme dynamic.

Hive is a lightweight and blazing fast key-value database written in pure Dart. Inspired by ** Bitcask **.

Add the packages to your flutter project by the following commands

flutter pub add hive_flutter
flutter pub add hive_listener

2. Initialize hive_flutter and open a hive box

To keep the theme mode on the mobile device, we'll use Hive. It is a fast key-value database that makes data persistence in flutter apps simple. It must be initialized before it can be used properly in the app. We will also need a box to house all of our app settings options. Insert this code snippet into your main function in the main.dart file.

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();
  await Hive.openBox('app_settings');

  Hive.box('app_settings').isEmpty
      ? {
          Hive.box('theme').put('theme', false),
        }
      : null;
  runApp(
    DynamicThemingApp()
  );
}

In the code below, we’ve opened a new box called “app settings” and initialized the hive_flutter package.

It is recommended to verify if the box is empty to avoid null exception problems. In the same way, you can initialize certain keys by assigning default values to them. This is why we added the ternary operator to the code snippet.

In our example, we initialized the “theme” key with the default value false.

This implies that when the app is launched for the first time, the user will not have selected a preferred theme, hence the default theme mode will be light.

3. Listen to theme mode changes

At this point

🥇 hive_flutter package is initialized

🥈 the app settings box is opened

🥉key theme is initialized with the default value of false.

Now we must listen to the box app settings. Here is listening in real time to see if a box’s key has been modified with a new value; this is where the Hive listener package comes in. It monitors box changes and updates the app accordingly. Simply wrap your MaterialApp widget in the HiveListener widget, as seen in this code sample.


class DynamicThemeApp extends StatelessWidget {
  const DynamicThemeApp({super.key});

  @override
  Widget build(BuildContext context) {
    return HiveListener(
      box: Hive.box('app_settings'),
      builder: (box) => MaterialApp(
        color: Palette.primary,
        themeMode: box.get('theme') ? ThemeMode.dark : ThemeMode.light,
        darkTheme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: Palette.backgroundDark,
        ),
        theme: ThemeData(
          useMaterial3: true,
          primaryColor: Palette.primary,
          scaffoldBackgroundColor: Palette.lightGrey,
        ),
      ),
    );
  }
}

4. Add switch widget to change theme mode

Everything is already in place for your app to be theme-dynamic.

Oops! One more thing…..

We need a widget that triggers the theme mode change. In this scenario, using a Switch widget, wrapped with a ValueListenableBuilder that listens to app_settings box might be the best solution. This widget just causes the app settings box to update the value of the theme key based on whether the switch is active or inactive. Because the HiveListener widget that wraps the MaterialApp widget monitors the “app_settings” box modifications, updating the state of the switch widget will cause the theme value to be updated, affecting the app’s theme mode.

ListTile(
  leading: const Icon(
    Icons.light_mode,
  ),
  trailing: ValueListenableBuilder(
    valueListenable:
        Hive.box('app_settings').listenable(),
    builder: (context, box, widget) =>
        CupertinoSwitch(
      value: box.get('theme'),
      onChanged: (value) {
        box.put('theme', value);
      },
    ),
  ),
  subtitle: const Text("Change theme"),
  title: const Text("Dark Mode"),
),

You should have a dynamic themed app if you followed all of the instructions for each phase. It’s just like this.

showcase

Congratulations 🎉🎉🎉 You have successfully added dynamic mode support to your app in a few simple steps with little worry.

Let’s connect and grow together 🤓

Baimam Boukar JJ

Flutter mobile developer | Open source Evangelist | Cloud & ML enthusiast

Github — LinkedIn — Twitter

GITHUB COPILOT: YOUR ULTIMATE CODE GENERATOR

Baimam Boukar Jean Jacques — Tue, 29 Jun 2021 20:21:46 +0000

Finding the ultimate code autocompletion and suggestions tool has always been a headache… But not anymore, the massiah is there: Github copilot.

LET'S GET STARTED

Github has just introduced an amazing tool for code autocompletion and suggestions. GitHub Copilot tries to understand your intent and to generate the best code it can

What is GitHub Copilot ?

GitHub Copilot is an AI pair programmer that helps you write code faster and with less work. GitHub Copilot draws context from comments and code, and suggests individual lines and whole functions instantly. The GitHub Copilot technical preview is available as a Visual Studio Code extension.

How to install github copilot in vscode?

As said above, github copilot has a Visual Studio Code extension that you can install in no time.

Here is the link : https://marketplace.visualstudio.com/items?itemName=GitHub.copilot