Forem: Gilbish

Will the whole MainWidget re-render or just the Wrapping widget which is using the state in flutter whenever setState is called?

Gilbish — Fri, 01 Sep 2023 14:47:26 +0000

I am new to Flutter , i was going through flutter doc and a doubt came to me, how the re-render or re building of UI works in flutter?

If i have two widgets under my Main Widget and i am using a state in the 2nd widget, will the first widget also get re-rendered? 🧐

class MainWidget extends StatefulWidget {
  @override
  _MainWidgetState createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('This is the second widget'),
        Text('Counter: $counter'),
        ElevatedButton(
          onPressed: () {
            incrementCounter();
          },
          child: Text('Increment Counter'),
        ),
      ],
    );
  }
}

Whenever the user Clicks the Increment Counter Button, the state will get updated, in response the UI should get re rendered.

But the question is will the **whole MainWidget** is **re-rendered** or just the **Text Widget** which is using the counter state?

Answer:

When you call setState, it schedules a rebuild of the widget, and the build method is called again. However, this does not necessarily mean that the entire MainWidget and its subtree will be rebuilt from scratch every time setState is called.

Flutter is designed to be efficient, and it employs a process called "reconciliation" to update the widget tree efficiently.

When setState is called, Flutter marks the widget as dirty and schedules it for rebuilding.
The next time the Flutter framework performs a frame update (typically 60 times per second), it checks which widgets are marked as dirty and calls their build methods.
During the build process, Flutter compares the new widget tree with the previous one (the one from the previous frame) and identifies the differences (what needs to be added, updated, or removed).
Flutter updates only the parts of the widget tree that have changed. This means that only the widgets and elements affected by the state change get rebuilt, while unchanged parts of the widget tree are reused.

So after the setState only the Widget which is using the counter state in it will be rebuilt.

 @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('This is the second widget'), // re-render ❌
        Text('Counter: $counter'), //  re-render ✅
        ElevatedButton(
          onPressed: () {
            incrementCounter();
          },
          child: Text('Increment Counter'), //re-render ❌
        ),
      ],
    );
  }

Thanks for the reading. 😇

useReducer Hook for functional components.

Gilbish — Sat, 24 Apr 2021 17:36:00 +0000

The useReducer hook comes in handy when you want to separate the state logic from the components. In the official doc of React, they have written it as an alternative to useState.

useReducer hook is usually preferable to useState when you have a complex state and you have to change multiple states at the same time.

const [state, dispatch] = useReducer(reducer, initialArg, init);

arguments of useReducer:

1) reducer
A reducer will be a function that takes two arguments.
the first argument is the initialState and the second will be the action. It will return the new state based on the action provided.

2) initialArg
initialArg is the initial state which is passed to the reducer.

3) init (optional)
It's a function that is used to create the initial state lazily. If you pass a third function argument to the useReducer hook, it passes the second argument to that function and uses the return value for the initial state.

Example

Let's create a counter app, in which the count will increase or decrease based on the button we click.

Step1 (create the component)

import React from 'react'
const CounterApp = ({initialCount=0,step=1}) => {
const count = initialCount;
const add = () => console.log('add');
const subtract = () => console.log('subtract');
return (
<>
<p>{count}</p>
<button onClick={add}>Add</button>
<button onClick={subtract}>Subtract</button>
</>
)
}

Step2 (create the reducer function)

const countReducer = (state,dispatch) => {
const {type,step} = dispatch; 
switch(type){
    case 'ADD':{
    return state + step
  }
   case 'SUBTRACT':{
    return state - step
 }
  default:{
   return state
  }
 }
}

here the state is the current state and dispatch (can also be said as action) is the argument that is passed in the setState. We are checking the type of action passed by the user and based on that we will set the new value. It works same as the reducer of Redux.

Step3 (use the Reducer with our component)

import React , {useReducer} from 'react'

const countReducer = (state,dispatch) => {
const {type,step} = dispatch; 
switch(type){
    case 'ADD':{
    return state + step
  }
   case 'SUBTRACT':{
    return state - step
 }
  default:{
   return state
  }
 }
}

const CounterApp = ({initialCount=0,step=1}) => {
const [count,setCount] = useReducer(countReducer,initialCount);
const add = () => setCount({type:'ADD',step});
const subtract = () => setCount({type:'SUBTRACT',step});
return (
<>
<p>{count}</p>
<button onClick={add}>Add</button>
<button onClick={subtract}>Subtract</button>
</>
)
}

const App = () => {
  return <CounterApp />
}

export default App;

Out CounterApp is ready. 🎉

We have used the useReducer hook for a simple counter app. I will suggest using the useState hook for simple cases and the useReducer hook for complex cases.

Thanks for reading my post. 😄
Let me know if you have any queries.

Tagged templates literal in js.

Gilbish — Sun, 28 Mar 2021 11:09:01 +0000

What is template literal? 😶

Template literals allow us to concatenate or embed variables inside a string. It was introduced in ES6.

Template literals are enclosed by the backtick.

Example:

   const age = 12;
   const title =`My age is ${age} years.`

What is Tagged templates literal? 😬

Here tag refers to a function which performs parsing of the given template literal.

styled components is a famous library that uses the tagged template literal.

Example:

   const Title = styled.h1`
     font-size: 1.5em;
     text-align: center;
     color: palevioletred;
`;

How it works? 😯

Step 1) Create a function.

const appendStyle = (array,val1,val2) => {
   //do something and return a value.
   return "testing";
}

can be also written as

const appendStyle = (array,...values) => {
   //do something and return a value.
   return "testing";
}

In the array we will get the split strings.
means if the template literal is My name is ${name} and my age is ${age}

then, the array will be

array = ['My name is','and my age is']

and in the values we will get all the arguments.

Step2) attach the function in front of the template literal, without the ()

  const name = 'gilbish';
  const age = '23';
  const text = appendStyle`My name is ${name} and my age is ${age}`;
 console.log(text);

// output: testing

Step3) finish the Function.

In the appendStyle function , we gonna make the color of each arguments to blue or whatever color you prefer. 😄

const appendStyle = (array,...values) => {
    let color = "blue"
    let text = '';
    array.map((item,index) => text += `${item} <span style="color:${color}">${values[index] || ''}</span> `);
    return text;
}

our tagged template literal appendStyle is ready to use 🎊

Example:

  const name = 'gilbish';
  const age = '23';
  const text = appendStyle`My name is ${name} and my age is ${age}`;

  document.body.innerHTML = text;

Output:

Thanks for reading the post 🙏

List of illustration resources.

Gilbish — Thu, 17 Dec 2020 07:52:02 +0000

I have created a list of websites which offer free + paid illustration.

It contain name and link of total 60websites from where you can easily download free + paid illustrations.

You can even filter the list based on different features like illustration type, illustration price, can be used in commercial or not, attribution required or not.

You can get the list from here: https://gumroad.com/l/illustrationslist

Thanks

Awesome List of Black Friday Sale for Geeks.

Gilbish — Wed, 25 Nov 2020 17:34:21 +0000

Black Friday Sale is on 🎉

It's the best time to purchase Domains, Educational Resources , Productivity Resources etc. etc. 😄

My Friend and colleague @Avikki has created an Awesome List of Black Friday and Cyber Monday sale for geeks 😎

More Deals are on the way. 🚚

Don't forget to ⭐ the Repo.

Repository Link : AwesomeList

Hope you like it. Thanks 😄

Custom Context Processors in Django.

Gilbish — Sun, 30 Aug 2020 11:13:00 +0000

What's the need of context processors? 😇

Sometimes you want to make a variable accessible to all templates in a project.

Two ways to access a variable in all templates:

1. Hard Way: By providing the same variable in the context of each view. 😐

2. Easy Way: creating a custom context processor 😋

Personally I don't like the hard way, cause then I have to write the same code in each view.

Let's see how it can be done the easy way.

Consider a situation where you need to display a banner image in each page of your website, the banner image will be fetched from the database.

Model for the banner image:

#models.py
class BannerImage(models.Model):
    image = models.ImageField(upload_to='img')

We can access the banner image in each page using the context processor.

Write Custom Context Processor 🙌

Create a new file context_processors.py inside your app and write a function which will return a dictionary containing the variable we want to use.

#context_processors.py

from .models import BannerImage

def access_banner_image(request):
    """
      The context processor must return a dictionary.
    """
    bannerImage = BannerImage.objects.latest('-id') #query the latest banner image
    return {'bannerImage':bannerImage}

access_banner_image is the custom context processors we just created, add it to the context_processors option in the TEMPLATES setting so that the variable bannerImage is accessible in all templates.

#settings.py
TEMPLATES = [
    {
        #under OPTIONS key
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
               #context processor written by us.
           'appname.context_processors.access_banner_image'
],
        },
    },
]

We are done 🎉 , the bannerImage variable will be now accessible in all the templates.

Example:

<img src="{{bannerImage.image.url}}" alt=''/>

Thanks For Reading my post.🙂

Self-Promotion 😀

IllustrationHunt One place to look for sites offering free illustrations.

Create a simple landing page in 5minutes using Ready-To-Use tailwind CSS blocks.

Gilbish — Thu, 02 Jul 2020 09:36:00 +0000

Intro

TailBlocks is a project that provides multiple templates built using Tailwind CSS.
It provides the HTML code that can easily be copied.

Sample Site built using TailBlocks:

Link: demo

Let's start

Step 1) Create a new HTML file

     <html/>
         <head>
           <title>TailWind CSS block</title>
         </head>
         <body>
         </body>
     </html>

Step 2) Add the CDN of TailWind CSS.

TailBlock uses TailWindCSS for css properties

     <html/>
         <head>
           <title>TailWind CSS block</title>
           <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
         </head>
         <body>
         </body>
     </html>

Step 3) Select Components from TailBlocks

Visit TailBlocks, there you can see list of components in the left sidebar

Find Header components from the left sidebar and select one component from it then copy its code in the HTML file we created.

You can copy its code by first clicking on ViewCode then Copy To Clipboard present in the Header of TailBlocks site.

This is the code i copied from the header component

     <html/>
         <head>
           <title>TailWind CSS block</title>
           <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
         </head>
         <body>
              <header class="text-gray-700 body-font">
                <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
                  <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                   </svg>
                  <span class="ml-3 text-xl">tailblocks</span>
              </a>
              <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
              <a class="mr-5 hover:text-gray-900">First Link</a>
              <a class="mr-5 hover:text-gray-900">Second Link</a>
              <a class="mr-5 hover:text-gray-900">Third Link</a>
              <a class="mr-5 hover:text-gray-900">Fourth Link</a>
            </nav>
           <button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Button
           <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
         <path d="M5 12h14M12 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</header>
         </body>
     </html>

OUTPUT:

TailBlock also provides options to change the color of the components.

Step 4) Try different components and build a good looking landing page

My Thought about TailBlocks:
It's good for creating a site in less time, however maintaining and customizing the code will be full of effort.
At last, I will prefer TailBlocks to impress my friends 😄

Thanks for reading. Happy Coding 🎉

One Place to look for sites offering Free Illustration Resources

Gilbish — Mon, 01 Jun 2020 04:10:30 +0000

I have created a site called IllustrationHunt using gatsby. IllustrationHunt contains the list of websites offering free illustrations. I hope you will like it, if you do then please share it with others in need XD.

Create a moving BOT illustration using CSS

Gilbish — Mon, 04 May 2020 10:46:39 +0000

Creating illustrations in CSS is like a hobby with perks 🎨 . I learned to create illustrations using CSS a few weeks earlier. So I put my skills in creating a moving bot illustration.

Requirements:

HTML
CSS

Let's Start 🏁

HTML structure:

   <div class="container">
       <div class="bot">
           <div class="bot_head">
               <div class="left_eye"></div>
               <div class="right_eye"></div>
           </div>
           <div class="stomach"></div>
       </div>
   </div>

.container is to wrap the whole screen

.bot is to wrap the bot, it will be used to set the maximum width and height of the bot

.bot_head is for the head of the bot

.left_eye & .right_eye is for the eyes of the bot

.stomach is for the lower part of the bot

Apply CSS:

Set width,height 100% of both html & body

   html,
   body{
      width:100%;
      height:100%;
      padding:0px;
      margin:0px;
      }

Set

position: absolute

to all tags so that left, right, bottom, top attributes can be used.

    *{
      position:absolute;
    }

    *:after,*:before{
      position:absolute;
      content:'';
    }

Apply flexbox in .container in order to justify the bot at the centre of the screen.

   .container{
      width:100%;
      height:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      }

set custom width & height for the bot container which is .bot, use flexbox to make its content justify & align centre.

   .bot{
       width:250px;
       height:400px;
       display:flex;
       align-items:center;
       flex-direction:column;
       }

now we can finally start with styling bot's body parts. ✨

BotHead:

border-radius will be useful to create the head of bot

   .bot_head{
       background:#66e366;
       width:150px;
       height:110px;
       top:10%;
       border-radius:30px 30px 30px 10px;
}

border-radius: top-left top-right bottom-right bottom-left

The bot_head will look like this

In order to create a pointed triangle in the bot head, which will make it look like a chatbot head, we will use the :after pseudo-elements of CSS .

  .bot_head:after{
       width:40px;
       height:40px;
       bottom:-17px;
       left:5px;
       background:inherit;
       clip-path: polygon(48% 100%, 0 0, 100% 0);
     }

The clip-path CSS property creates a clipping region that sets what part of an element should be shown .
You can use BennettFeely to generate clip-path.

Eyes:

For the Eyes, we will create two circles both for left and right eyes

   .left_eye{
         width:30px;
         height:30px;
         background:white;
         border-radius:50%;
         top:30px;
         left:30px;
         }
    .right_eye{
         width:30px;
         height:30px;
         background:white;
         border-radius:50%;
         top:30px;
         right:30px;
     }

left:30px will move the .left_eye 30px from the left.

right:30px will move the .right_eye 30px from right.

we have written similar code for both left_eye and right_eye in order to use separate left & right CSS properties. However, using sass can reduce the repetition but we are not using it in this article.

Stomach Part:

create a big circle and move it 45% from top

   .stomach{
      width:150px;
      height:150px;
      border-radius:50%;
      top:45%;
      background:#43bfe6;
     }

Awesome we have our bot ready.

Animation:

Definition by Mozilla docs:
''CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.''

The CSS style properties & keyframes are used in order to create animations.

How to create Keyframes:

@keyframes AnimationName{
     0%{
        /* some css property */
        left: 20px;
      },
     50%{
        left:40px;
      }
     100%{
        /* some css property */
        left: 0px;
        }
}

here AnimationName can be any name you prefer to use like jump, bounce, slide etc.
we are telling keyframe that at 0% of animation make the element shift to left 20px, at 50% 40px to the left and at 100% of animation return back to 0px from left.

How to use Keyframes:

CSS animation property is used to apply the keyframes.

Syntax:

animation: animation-name animation-duration animation-timing-function animation-iteration-count;

animation-name: identifier for the keyframe.

animation-duration: how long the animation should take to finish.

animation-timing-function: It specifies the speed curve of an animation.

animation-iteration-count: how many times the animation should iterate.

You can read in detail about animation at css-tricks

let's apply the animation in our cute bot.

create keyframes for the stomach:

   @keyframes stomach_move{
    0%,50%,100%{
       left:15%; /* we can set same style for multiple percentage */
     }
    25%{
      left:-35%;
     }
    75%{
      left:100%;
     }
   }

At 0%, 50% & 100% of the animation the bot will be at 15%(towards right side) from the left,it is the starting and ending position of animation.
At 25% the bot will move -35%(towards left side) from the left.
At 75% the bot will move 100%(towards right side) from the left.

In left:100% the 100% is the complete width of the .bot class which is 250px.

Apply stomach_move keyframe in .stomach class under animation property

   .stomach{
       width:150px;
       height:150px;
       border-radius:50%;
       top:45%; 
       background:#43bfe6;
       animation: stomach_move 3s ease infinite;
    }

The stomach is moving left & right.
The animation-iteration-count is set to infinite which will make the animation iterate infinitely.

create keyframes for the bot_head:

   @keyframes bot_head_motion{
     0%,50%,100%{
       left:25%;
     }
     25%{
      left:-45%;
      transform:rotate(-20deg)
     }
     75%{
      left:90%;
      transform:rotate(20deg)
      }
  }

''The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. ''
At 25% the bot head will rotate -20deg and at 75% it will rotate by 20deg.

Apply bot_head_motion keyframe in .bot_head class

      .bot_head{
        background:#66e366;
        width:150px;
        height:110px;
        top:10%;
        border-radius:30px 30px 30px 10px;
        animation: bot_head_motion 3s ease infinite;
}

and tada 🎉 the bot is moving 😄

Here is my codepen:

ThankYou for reading this 😄
Feel free to customize the animations on your own.