DEV Community: Ambareesha AV

Force dropdown menu items to open under the dropdown button in Flutter

Ambareesha AV — Wed, 08 Nov 2023 11:41:09 +0000

Problem statement
By default dropdown menu items open on top of the dropdown button, and when we get a design showing dropdown menu items listed under the dropdown button, somehow the developer has to figure out how to achieve it.

How I achieved it
we will be using Flutter is one of the well-matured cross-platform app development frameworks out there and we can build pixel-perfect apps from it.
I will be using vscode as my code editor, let's create a flutter project,
open pubspec.yaml and add this package dropdown_button2

with this package, we can design dropdown button and menu UI however we want.
so in this article, we are focusing only on opening menu items under the dropdown button.

Let's open main.dart delete all unwanted code, add default DropdownButton() widget with items and also add DropdownButton2() into Column.
I'm using Faker package to generate menu items

magic happens in these lines of code

dropdownStyleData: DropdownStyleData(
                    maxHeight: MediaQuery.of(context).size.height * 0.3),

here I'm giving 30% of the screen size because I placed dropdown buttons in the center of the screen so it will work here but if you want to place dropdown button in different place of the screen then you have to changes maxHeight value based on your UI

default dropdown widget

menu items under dropdown button

here is the full code.

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:faker/faker.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dropdown menu items',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Dropdown menu items'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> getNamesList(int length) {
    return List.generate(length, (index) => Faker().food.dish())
        .toSet()
        .toList();
  }

  List<DropdownMenuItem<String>> getItems(List<String> list) {
    return list.map((e) => DropdownMenuItem(value: e, child: Text(e))).toList();
  }

  Widget get getHintWidget => Text('Select Item',
      style: TextStyle(fontSize: 14, color: Theme.of(context).hintColor));
  List<String>? list1;
  List<String>? list2;
  String? value1;
  String? value2;
  @override
  void initState() {
    list1 = getNamesList(40);
    list2 = getNamesList(40);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const Text("default dropdown button"),
            DropdownButtonHideUnderline(
              child: DropdownButton(
                value: value1,
                onChanged: (value) {
                  value1 = value;
                  setState(() {});
                },
                hint: getHintWidget,
                items: getItems(list1!),
              ),
            ),
            const Text("open under button"),
            DropdownButtonHideUnderline(
              child: DropdownButton2<String>(
                hint: getHintWidget,
                items: getItems(list2!),
                value: value2,
                onChanged: (value) {
                  value2 = value;
                  setState(() {});
                },
                dropdownStyleData: DropdownStyleData(
                    maxHeight: MediaQuery.of(context).size.height * 0.3),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Thank you happy coding...

Send a msg to Discord channel through webhook in Elixir

Ambareesha AV — Mon, 30 Oct 2023 13:03:36 +0000

Webhooks

Webhooks are a form of HTTP-based callbacks that are triggered by specific events on a Web Platform. A callback refers to a small code snippet related to a Web Application. Whenever any triggering event occurs on the originating Web Platform, the Webhooks identifies it, collects the data, and sends it to the URL you specified as an HTTP request.

A Webhook acts as a reverse API and is used for calling another application to receive data. You can connect a Webhooks with another application to send data directly to your system as soon as there is a change in it. This makes the process very convenient and efficient for providers and users.

Using Webhooks allows Web Applications to automate their communication. Unlike traditional systems that involved one system polling other systems for some data, Webhooks enables you to automatically push data into the other system whenever some event occurs. This eliminates the need for constant monitoring by the subject.

The following features have made Webhooks popular in the market:

Automation: Webhooks enable many types of automation powered by other services and also allow you to manually send clear messages. These features provide various use cases like posting updates, logging, posting custom messages for aesthetic purposes, etc.
Customization: You can associate a unique name and image with each of your Webhooks. Moreover, each message sent by these Webhooks can also be unique. You can have several different Webhooks on different channels and use them according to your need.
Low Cost: All you need to work with Webhooks is its URL and a Website to which the Webhooks will be connected. Moreover, unlike a regular bot, Webhooks are hosted on Discord. This often saves you the hassle of making a financial investment to use them.

Discord's Webhooks

Discord's built in Webhooks function as an easy way to get automated messages and data updates sent to a text channel in your server.

Think of them as one of those fancy pneumatic tube things you used to love sending money into at a bank and watch disappear, but instead of never seeing your money again, you're actually sending messages into Discord from another platform.

By creating a webhook endpoint in your server, you'll generate a Webhook URL that you can drop into a number of different other services to link the two.

While everyone absolutely loves pneumatic tubes (100% true), it's important to note that webhooks require another website to use (though programming-inclined users can make their own tube schoomper themselves).

MAKING A WEBHOOK

Open your Server Settings and head into the Integrations tab:
Click the "Create Webhook" button to create a new webhook!

You'll have a few options here. You can:

Edit the avatar: By clicking the avatar next to the Name in the top left
Choose what channel the Webhook posts to: By selecting the desired text channel in the dropdown menu.
Name your Webhook: Good for distinguishing multiple webhooks for multiple different services.

You now have your own handy URL / pneumatic tube schoomp-er that you can link to more websites to receive messages from.

Now copy the URL

Elixir Part

Now think where you wanted to trigger event notification,
To simplify I send a notification message whenever someone visits my web page

Implement The Code

We will create a new Phoenix project called "webhook" we'll use mix commands to generate boiler plate project
run this command in your terminal mix phx.new webhook --install
open your generated project in IDE,
we need HTTP Client to send a message to Discord, so I'm using HTTPoison add {:httpoison, "~> 1.8"} in mix.exs then run mix deps.get

open page_controller.ex add this snippet

def send_webhook(user, msg) do
    case System.get_env("DISCORD_CHANNEL") do
      nil ->
        IO.puts("DISCORD_CHANNEL webhook is not loaded from .env")
        nil

      url ->
        headers = [{"Content-type", "application/json"}]
        body = Jason.encode!(%{content: "this user: #{user} has visited your page: \n#{msg}"})
        HTTPoison.post(url, body, headers) # actual magic happens on this line of code
    end
  end

for security reasons I stored above copied Discord webhook(url) in .env file, open or create .env file in your project root folder add export DISCORD_CHANNEL=URL then run source .env command in your terminal
The above function will send a message to given URL in .env
place this function send_webhook(user, msg) somewhere in index/2 block now run mix phx.server and visit localhost:4000 it will send message to your Discord channel
you can use this function wherever you wanted to trigger a event notification and modify body variable according your requirements, body accepts only JSON format, read more on Discord

this is how we build software in Functionary labs

What Is JWT?

Ambareesha AV — Mon, 30 Oct 2023 12:45:55 +0000

JWT is becoming more popular for securing APIs. But what is JWT exactly? And how does it work?
That's what we break down in this blog.

What Is JWT?

JWT, or JSON Web Token, is an open standard used to share security information between two parties — a client and a server. Each JWT contains encoded JSON objects, including a set of claims. JWTs are signed using a cryptographic algorithm to ensure that the claims cannot be altered after the token is issued.

What Is JSON?

For beginning developers, JSON stands for JavaScript Object Notation and is a text-based format for transmitting data across web applications. It stores information in an easy-to-access manner, both for developers and computers. It can be used as a data format by any programming language and is quickly becoming the preferred syntax for APIs, surpassing XML.

What Are Tokens?

Now that you understand JSON as a data text format, you may be wondering What are tokens? To put it simply, a token is a string of data that represents something else, such as an identity. In the case of authentication, a non-JWT based token is a string of characters that allow the receiver to validate the sender’s identity. The important distinction here is lack of meaning within the characters themselves.

How JWT Works

JWTs differ from other web tokens in that they contain a set of claims. Claims are used to transmit information between two parties. What these claims are depends on the use case at hand. For example, a claim may assert who issued the token, how long it is valid for, or what permissions the client has been granted.
A JWT is a string made up of three parts, separated by dots (.), and serialized using base64. In the most common serialization format, compact serialization, the JWT looks something like this:

xxxxx.yyyyy.zzzzz

Once decoded, you will get two JSON strings:
The header and the payload.
The signature.
The JOSE (JSON Object Signing and Encryption) header contains the type of token — JWT in this case — and the signing algorithm.

The payload contains the claims. This is displayed as a JSON string, usually containing no more than a dozen fields to keep the JWT compact. This information is typically used by the server to verify that the user has permission to perform the action they are requesting.
There are no mandatory claims for a JWT, but overlaying standards may make claims mandatory. For example, when using JWT as bearer access token under OAuth2.0,

iss, sub, aud, and exp

must be present. some are more common than others.
The signature ensures that the token hasn’t been altered. The party that creates the JWT signs the header and payload with a secret that is known to both the issuer and receiver, or with a private key known only to the sender. When the token is used, the receiving party verifies that the header and payload match the signature.

JWT Example: OAuth Bearer Tokens

A common way to use JWTs is as OAuth bearer tokens. In this example, an authorization server creates a JWT at the request of a client and signs it so that it cannot be altered by any other party. The client will then send this JWT with its request to a REST API. The REST API will verify that the JWT’s signature matches its payload and header to determine that the JWT is valid. When the REST API has verified the JWT, it can use the claims to either grant or deny the client’s request.
In simpler terms, you can think of a JWT bearer token as an identity badge to get into a secured building. The badge comes with special permissions (the claims); that is, it may grant access to only select areas of the building. The authorization server in this analogy is the reception desk — or the issuer of the badge. And to verify that the badge is valid, the company logo is printed on it, similar to the signature of the JWT. If the badge holder attempts to access a restricted area, the permissions on the badge determine whether or not they can access the area, similar to the claims in a JWT.

Why Use JWT?

In short, JWTs are used as a secure way to authenticate users and share information.
Typically, a private key, or secret, is used by the issuer to sign the JWT. The receiver of the JWT will verify the signature to ensure that the token hasn’t been altered after it was signed by the issuer. It is difficult for unauthenticated sources to guess the signing key and attempt to change the claims within the JWT.
Not all signing algorithms are created equal though. For example, some signing algorithms use a secret value that is shared between the issuer and the party that verifies the JWT. Other algorithms use a public and private key. The private key is known only to the issuer, while the public key can be widely distributed. The public key can be used to verify the signature, but only the private key can be used to create the signature. This is more secure than a shared secret because the private key only needs to exist in one place.
Because of this, the server does not need to keep a database with the information needed to identify the user. For developers, this is great news, the server that issues the JWT and the server that validates it do not have to be the same.
When it comes to APIs, JWTs are the standard. They offer a compact and safe method of information exchange without the need for a centralized token database.
Now that you have answers to what is JWT? and what are tokens?, you can create more secure APIs.
check for more details JWT.io