<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Kishor Kc</title>
    <description>The latest articles on Forem by Kishor Kc (@devkishor8007).</description>
    <link>https://forem.com/devkishor8007</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F623073%2F50b75c6e-8a64-4450-a67a-e2168783cf67.png</url>
      <title>Forem: Kishor Kc</title>
      <link>https://forem.com/devkishor8007</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/devkishor8007"/>
    <language>en</language>
    <item>
      <title>Importing &amp; Exporting PSQL Database Dump using Docker</title>
      <dc:creator>Kishor Kc</dc:creator>
      <pubDate>Fri, 09 Jan 2026 09:40:20 +0000</pubDate>
      <link>https://forem.com/devkishor8007/importing-exporting-psql-database-dump-using-docker-10l6</link>
      <guid>https://forem.com/devkishor8007/importing-exporting-psql-database-dump-using-docker-10l6</guid>
      <description>&lt;p&gt;Before you begin, make sure you have a PostgreSQL Docker image and container ready, along with your SQL dump file. If you don’t already have a PostgreSQL container set up, you’ll need to create one with proper credentials.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker ps
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command lists all active containers. You should see your PostgreSQL container listed. For instance, one named &lt;code&gt;exampledb&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;In my case, a friend shared a large dump database with me, and I needed to explore and understand its contents. Since the dataset was quite large, I decided to work with Docker because it offers a faster, persistent, and reusable setup for managing SQL files.&lt;/p&gt;

&lt;p&gt;To copy the dump file into your Docker container, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker cp path_of_dump_file.sql &amp;lt;container_name&amp;gt;:tmp/&amp;lt;name_stored.sql&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For instance:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker cp ~/Downloads/example_db.sql exampledb:tmp/example_db.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If successful, you’ll see a confirmation message like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Successfully copied 23MB to exampledb:/tmp/example_db.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At this point, your SQL file is available inside the container, and you can use it to populate your PostgreSQL database. Once the data is loaded, you can start inspecting, identifying, and debugging your database as needed.&lt;/p&gt;

&lt;p&gt;Verify that the file exists inside the container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker exec -it exampledb ls -lh /tmp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should see:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ example_db.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the target database does not exist, create it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker exec -it exampledb psql -U root -c "CREATE DATABASE example_db;"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Import the Dump into PostgreSQL
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker exec -i exampledb psql -U root -d example_db -f /tmp/example_db.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The SQL dump was successfully executed, and the data has been imported into the target database.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhfeyvyc29e4502pgk9j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhfeyvyc29e4502pgk9j.png" alt="hurray-img" width="540" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Export (backup) a PostgreSQL database from a Docker container
&lt;/h2&gt;

&lt;p&gt;If you ever need to export (dump) your PostgreSQL database from Docker back to your local machine, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker exec &amp;lt;container_name&amp;gt; pg_dump -U &amp;lt;db_user&amp;gt; &amp;lt;db_name&amp;gt; &amp;gt; file.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For instance:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker exec exampledb pg_dump -U root exampledb &amp;gt; example_db_dump.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create a &lt;code&gt;example_db_dump.sql&lt;/code&gt; file on your local system containing the full backup of your database.&lt;/p&gt;

&lt;p&gt;Thank you.&lt;br&gt;
Remember to keep learning and exploring new things.&lt;/p&gt;

</description>
      <category>database</category>
      <category>docker</category>
      <category>postgres</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Nodejs | Docker | Multi-stage</title>
      <dc:creator>Kishor Kc</dc:creator>
      <pubDate>Wed, 09 Oct 2024 13:05:35 +0000</pubDate>
      <link>https://forem.com/devkishor8007/nodejs-docker-multi-stage-30o2</link>
      <guid>https://forem.com/devkishor8007/nodejs-docker-multi-stage-30o2</guid>
      <description>&lt;p&gt;I am familiar with the single stage docker file, Although when I am writing with the single stage docker file, I never consider the image size, security and optimizing build process.&lt;/p&gt;

&lt;p&gt;Using Docker with node.js has always on my mind, and today I want to share my journey of learning about multi-stage Docker. I successfully wrote and ran a Dockerfile, and I'm excited to discuss the process and insights I've gained along the way.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fok8r3nketasgvesvutch.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fok8r3nketasgvesvutch.jpg" alt="happy-image" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One day, while discussing random topics with another developer, our conversation unexpectedly turned into an exciting topic i.e. Docker, Node.js, Docker security and image size. During the discussion, I was introduced to the concept which I have to research and have to implement while I am working with Docker. After our discussion ended with smiles all around, Then I began my research and I found multi-stage Docker builds where can reduce image size, enhance security and also improved build efficiency, among other benefits.&lt;/p&gt;

&lt;h3&gt;
  
  
  What I Learned About Multi-Stage Dockerfiles?
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvzdaxmfqepylbzenxvut.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvzdaxmfqepylbzenxvut.jpg" alt="think-what-learn-multi-stage-docker" width="800" height="560"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A multi-stage Dockerfile allows you to create more efficient images by separating the build process from the final runtime environment. This approach helps in minimizing the size of the final image and improving security. Here’s a basic overview of how a multi-stage Dockerfile works:&lt;/p&gt;

&lt;h2&gt;
  
  
  Basic Structure of a Multi-Stage Dockerfile
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Build Stage: Contains all the tools and dependencies needed to build your application. This stage includes compiling code, installing build tools, and generating artifacts.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Final Stage: Uses a clean base image and copies only the necessary files from the build stage to produce a smaller, more secure final image. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;em&gt;Example&lt;/em&gt;&lt;br&gt;
&lt;small&gt;I am sharing an example of a Dockerfile for a Node.js application&lt;/small&gt;&lt;br&gt;
&lt;small&gt;create a file name as a Dockerfile&lt;/small&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Dockerfile&lt;br&gt;
&lt;/p&gt;


&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Stage 1: Build
FROM node:20.11.0-alpine AS build
WORKDIR /usr/src/app

# Copy package.json and yarn.lock
COPY package.json yarn.lock ./
RUN yarn

# Copy the rest of the application code
COPY . .

# Build the application
# RUN yarn build # Uncomment if you have a build step [TypeScript]

# Stage 2: Production
FROM node:20.11.0-alpine
WORKDIR /usr/src/app

# Copy only the build artifacts and runtime dependencies
COPY --from=build /usr/src/app/ ./
# COPY --from=build /usr/src/app/dist ./dist # Use this line if you have built files [TypeScript]

# Expose the port and define the command to run the application
EXPOSE 3001
# CMD [ "node", "dist/app.js" ] # Use this line if you are working with TS
CMD ["node", "src/app.js"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Adding a &lt;code&gt;.dockerignore&lt;/code&gt; file to your project provides several benefits, helping to streamline the Docker build process and improve efficiency.&lt;br&gt;
Here’s a sample &lt;code&gt;.dockerignore&lt;/code&gt; file that excludes common unnecessary files:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Node modules
node_modules

# Build output
dist
build

# Logs
*.log

# Environment files
.env

# Git files
.git
.gitignore

# Dockerfile and other Docker-related files
Dockerfile*
.dockerignore
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;To Execute the Dockerfile&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker build -t node-app .
$ docker run -p 3001:3001 -e PORT=3001 -e NODE_ENVIRONMENT=development node-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Benefits of Multi-Stage Builds&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Smaller Image Size&lt;/strong&gt;: Reduces the size of the final image by excluding build tools and intermediate files..&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Improved Security:&lt;/strong&gt;  Alpine is designed to be a secure and efficient base, which helps maintain a smaller attack surface.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Better Performance&lt;/strong&gt;: Faster build times due to effective caching of stages.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cleaner Dockerfile&lt;/strong&gt;: Separates concerns and improves readability and maintainability.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Mitigation Strategies&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Simplify&lt;/strong&gt;: Use multi-stage builds only when needed and avoid unnecessary complexity.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Comment&lt;/strong&gt;: Add comments to explain each stage and step.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Optimize Caching&lt;/strong&gt;: Use Docker’s caching to speed up builds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Monitor Resources&lt;/strong&gt;: Track and optimize resource usage during builds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Test&lt;/strong&gt;: Verify each stage individually before combining them.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Research&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;small&gt;I am sharing the resources; I have found while learning about multi-stage Docker builds. You can also learn from below resources.&lt;/small&gt;&lt;br&gt;
&lt;a href="https://docs.docker.com/build/building/multi-stage/" rel="noopener noreferrer"&gt;Building Multi-Stage&lt;/a&gt;&lt;br&gt;
&lt;a href="https://collabnix.com/getting-started-with-docker-multi-stage-builds/" rel="noopener noreferrer"&gt;Start Docker Multi-Stage&lt;/a&gt;&lt;br&gt;
&lt;a href="https://dev.to/raunakgurud09/mastering-docker-multistage-builds-1e0m"&gt;Mastering Docker Multi-Stage&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank you.&lt;br&gt;
Remember to keep learning and exploring new things.&lt;/p&gt;

</description>
      <category>node</category>
      <category>docker</category>
      <category>multistage</category>
      <category>container</category>
    </item>
    <item>
      <title>Start Docker - Digging</title>
      <dc:creator>Kishor Kc</dc:creator>
      <pubDate>Sun, 14 Jan 2024 15:29:31 +0000</pubDate>
      <link>https://forem.com/devkishor8007/start-docker-digging-1lca</link>
      <guid>https://forem.com/devkishor8007/start-docker-digging-1lca</guid>
      <description>&lt;p&gt;Hello Everyone!&lt;/p&gt;

&lt;p&gt;You can find a lot of resources about Docker, and I’m here to share what I’ve learned. Let’s start by going through the basics of Docker, skipping over the details of what Docker is and how it helps in development or production mode.&lt;/p&gt;

&lt;p&gt;Here are some keys to know about Docker:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Images (Pictures)&lt;/li&gt;
&lt;li&gt;Containers (Boxes)&lt;/li&gt;
&lt;li&gt;Dockerfile (Recipe)&lt;/li&gt;
&lt;li&gt;Docker Commands (Orders)&lt;/li&gt;
&lt;li&gt;Docker Compose (Teamwork)&lt;/li&gt;
&lt;li&gt;Docker Registry (Storage)&lt;/li&gt;
&lt;li&gt;Volumes (Storage Spaces)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I'll go straight to the point and share what I've done with Node.js and Docker. In my project, I built a simple Node.js server using Docker. In the project repository you will find a Dockerfile. It’s like a set of instructions that we can use to build our Docker image. Check it out, and you'll see a dockerignore file as well. This file helps us to exclude certain files and folders while creating our Docker image.&lt;/p&gt;

&lt;p&gt;Take a look at the repository:&lt;br&gt;
&lt;a href="https://github.com/devkishor8007/docker-digging"&gt;https://github.com/devkishor8007/docker-digging&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And I'll share you how we can run the repository from docker container&lt;br&gt;
To run, we need some sort of commands&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker build -t docker-digging . 
$ docker run -p 4075:4075 --env-file=.env docker-digging
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---z_npVJ3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8qnbjs64qoy6wtreuyi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---z_npVJ3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8qnbjs64qoy6wtreuyi.png" alt="running-server" width="775" height="92"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once your server is running; &lt;br&gt;
Open the browser and hint the api url&amp;gt; &lt;a href="http://localhost:4075/api/v1/health"&gt;http://localhost:4075/api/v1/health&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vAfwzEfc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ko8fpir3ao63du69tfi1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vAfwzEfc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ko8fpir3ao63du69tfi1.png" alt="happy-emoji" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Awesome!&lt;br&gt;
Everything is working perfectly! If we're not familiar with the commands we're using, and I'll help you out.&lt;/p&gt;

&lt;p&gt;So, Let's break down each part of above docker container commands&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;docker build -t docker-digging . :&lt;/code&gt;&lt;br&gt;
&lt;code&gt;docker build&lt;/code&gt;: Build a new docker image .&lt;br&gt;
&lt;code&gt;-t docker-digging&lt;/code&gt;: -t means a flag assigns a name to the image. And we named "docker-digging"&lt;br&gt;
&lt;code&gt;.&lt;/code&gt;: This dot represents the current directory as Docker should use the current directory as the build context. It includes all the files in the current directory when building the image.&lt;br&gt;
So this commands represents build a docker new image from a current directory with a name "docker-digging"&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;docker run -p 4075:4075 --env-file=.env docker-digging&lt;/code&gt;&lt;br&gt;
&lt;code&gt;docker run&lt;/code&gt;: This command to run a Docker container from a given image.&lt;br&gt;
&lt;code&gt;-p 4075:4075&lt;/code&gt;: -p flag maps port 4075 on the host machine to port 4075 inside the Docker container. It allows us to access the service running in the container via &lt;a href="http://localhost:4075"&gt;http://localhost:4075&lt;/a&gt;&lt;br&gt;
&lt;code&gt;--env-file=.env&lt;/code&gt;: --env-file flag specifies an environment file (.env) that contains environment variables.&lt;br&gt;
&lt;code&gt;docker-digging&lt;/code&gt;: This is the name of the docker image to be used for running the container.&lt;br&gt;
So, this command represents, "Run a Docker container from the 'docker-digging' image, map port 4075, and use environment variables from the .env file"&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;em&gt;Resources&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://docs.docker.com/get-started/"&gt;Start Docker&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.docker.com/get-started/docker_cheatsheet.pdf"&gt;Docker CheatSheet&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/veggiemonk/awesome-docker"&gt;Awesome Docker&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thank you.&lt;br&gt;
Remember to keep learning and exploring new things.&lt;/p&gt;

</description>
      <category>docker</category>
      <category>container</category>
      <category>node</category>
      <category>express</category>
    </item>
    <item>
      <title>MongoDB With Docker</title>
      <dc:creator>Kishor Kc</dc:creator>
      <pubDate>Sun, 21 May 2023 16:19:04 +0000</pubDate>
      <link>https://forem.com/devkishor8007/mongodb-with-docker-23d5</link>
      <guid>https://forem.com/devkishor8007/mongodb-with-docker-23d5</guid>
      <description>&lt;p&gt;I am explaining how Docker can be utilized to set up the database and demonstrate its practical applications. In this article, I am focusing on utilizing the MongoDB database and provide instructions on its utilization.&lt;/p&gt;

&lt;p&gt;There are several benefits to setting up MongoDB with Docker instead of installing it directly on your local PC:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Isolation&lt;/code&gt;: Docker keeps MongoDB separate from your local system, ensuring stability and consistency.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Deployment&lt;/code&gt;: Docker makes it easy to deploy multiple MongoDB instances and manage replica sets or clusters.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Consistency&lt;/code&gt;: Docker ensures consistent environments across different machines, avoiding version or configuration conflicts.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Cleanup and Portability&lt;/code&gt;: Docker allows easy removal of MongoDB containers and seamless migration to different environments.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Dependency Management&lt;/code&gt;: Docker simplifies managing MongoDB versions and dependencies.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm ready to help you install MongoDB in a Docker container. Let's get started!&lt;/p&gt;

&lt;p&gt;To install mongo in docker&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker pull mongo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To determine if MongoDB is installed within our Docker environment, we need to check whether the Mongo image is present. If the image is found, we can view its ID, tag/version, and size. However, if the image is not available, no information will be displayed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker images mongo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run the first MongoDB container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -d --name mongo-one -p 27017:27017 mongo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run the Second MongoDB container:&lt;br&gt;
If you need the multiple container, then you can use it&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -d --name mongo-two -p 27018:27017 mongo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this above example, the container are mongo-one and mongo-two, and the -p option maps port 27017/27018 from the host machine to the container. You can choose a different container name and port mapping if desired.&lt;/p&gt;

&lt;p&gt;Show all currently running Docker containers&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker ps
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;execute a running Docker container: mongo-one&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker exec -it mongo-one bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;after execute a running docker container of mongo, we have to start the MongoDB Shell and interact with the MongoDB database running inside the container&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mongosh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once the MongoDB container is successfully executed, you will obtain the database URL, which can be used with various programming languages such as Node.js, Python, Rust, Go, and more. This URL will enable you to establish a connection to the MongoDB database from your chosen programming environment.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const DB_URL1='mongodb://localhost:27017/&amp;lt;db_name&amp;gt;';
const DB_URL2='mongodb://localhost:27018/&amp;lt;db_name&amp;gt;';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both DB_URL1 and DB_URL2 are database URLs that can be obtained when running the Docker containers for MongoDB. If you execute the "mongo-one" and "mongo-two" containers as mentioned, both DB_URL1 and DB_URL2 will be operational and can be used to establish connections to the respective MongoDB databases.&lt;/p&gt;

&lt;p&gt;Once the database is up and running, I can share a set of commands through the Docker shell to interact with MongoDB. These commands enable us to perform various operations and manipulate the MongoDB database within the Docker environment&lt;/p&gt;

&lt;p&gt;show all the databases&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;show dbs
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Feel free to use the &lt;code&gt;help&lt;/code&gt; command if you find yourself confused or uncertain about how to proceed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;help
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;switch to the &lt;code&gt;store&lt;/code&gt; database&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;use store
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Get all the collections present in the currently selected database&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;show collections
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create multiple fruit in the store&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;db.fruit.insertMany([
{name:"apple", price: 250, color: "red"}, 
{name:"banana", price: 120, color: "yellow"},
{name:"papaya", price: 150, color: "yellowish-orange"}
])
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Get all the fruit&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;db.fruit.find()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Get all the fruits which &lt;code&gt;name&lt;/code&gt; contain &lt;code&gt;banana&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;db.fruit.find({name: "banana"})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Get the single fruit by &lt;code&gt;name&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;db.fruit.findOne({name: "banana"})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Updates a single document based on the matching name&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;db.fruit.findOneAndUpdate(
   { name: "banana" },
   { $set: { price : 100 } },
)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Resources&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.mongodb.com/docs/drivers/node/current/fundamentals/crud/"&gt;Fundamental MongoDB&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://learn.mongodb.com/?tck=docs_landing"&gt;Learn MongoDB&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/ramnes/awesome-mongodb"&gt;Awesome MongoDB&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.docker.com/get-started/"&gt;Start Docker&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/veggiemonk/awesome-docker"&gt;Awesome Docker&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thank you.&lt;br&gt;
Remember to keep learning and exploring new things.&lt;/p&gt;

</description>
      <category>docker</category>
      <category>mongodb</category>
      <category>cli</category>
      <category>database</category>
    </item>
    <item>
      <title>Common Widgets in Flutter</title>
      <dc:creator>Kishor Kc</dc:creator>
      <pubDate>Sat, 29 Apr 2023 05:46:13 +0000</pubDate>
      <link>https://forem.com/devkishor8007/common-widgets-in-flutter-5a4c</link>
      <guid>https://forem.com/devkishor8007/common-widgets-in-flutter-5a4c</guid>
      <description>&lt;p&gt;Whatever we build our applications using flutter, these widgets are commonly used in our mobile apps. Although the method of creating a User Interface(UI) can vary, the usage of widgets remains consistent. &lt;/p&gt;

&lt;p&gt;I would like to share the commonly used widgets in Flutter. If you are a Flutter developer, you may already be familiar with them.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Stateless and Stateful Widget&lt;/code&gt;:&lt;br&gt;
Stateless Widget is static widget as only updates when it is initialized where Stateful Widget is the dynamic widget as the changes dynamically.&lt;br&gt;
Only Stateful Widget can use setState()&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Scaffold Widget&lt;/code&gt;:&lt;br&gt;
The Scaffold is a widget in Flutter used to implements the basic material design visual layout structure.&lt;br&gt;
With help of Scaffold Widget, we can use other widgets like AppBar, Body, Floating Action Bar, Bottom Navigation Bar and Persistent Footer Buttons, etc. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;AppBar&lt;/code&gt;: Used to create a navigation bar at the top of the screen.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Text&lt;/code&gt;: Used to display text with various styles, such as font size, font weight, color, and alignment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Container&lt;/code&gt;: Used to contain other widgets and customize their appearance, such as setting padding, margin, color, and border&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;SizedBox&lt;/code&gt;: allows you to create a box with a specified width, height, or both&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Row &amp;amp; Column&lt;/code&gt;: Used to layout widgets vertically and horizontally, respectively.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;TextFormField&lt;/code&gt;: Used for creating a form input field with validation.&lt;br&gt;
Used to allow users to input text in your app&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Card&lt;/code&gt;: Used for creating a container with a shadow effect that can be used to display content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;IconButton&lt;/code&gt;, &lt;code&gt;MaterialButton&lt;/code&gt;, &amp;amp; &lt;code&gt;ElevatedButton&lt;/code&gt;: used to create buttons with different styles and properties&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Image&lt;/code&gt;: Used to display images in your app, either from local resources or from a network.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;ListView&lt;/code&gt;: Used to display a scrollable list of items, either vertically or horizontally.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;ClipRRect&lt;/code&gt;: Used to clips its child using a rounded rectangle.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Each widget has its own unique properties,  and we can utilize the properties of the widget that are required to our application.&lt;/p&gt;

&lt;p&gt;If you need more widgets, Please Have a look on flutter official docs - &lt;a href="https://docs.flutter.dev/development/ui/widgets"&gt;flutter widgets&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I would like to share the UI that I created using these widgets in Flutter, and the code is available on &lt;a href="https://github.com/devkishor8007/common_widget_flutter"&gt;GitHub&lt;/a&gt;. This provides you with an idea of how you can use these commonly used widgets to create simple UI apps. &lt;/p&gt;

&lt;p&gt;Each widget has its own roles and responsibilities but the important things is to identify which widget is suitable for our application and will make it visually appealing.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Screenshots&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--erOnxzFH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlastvd77vngsfw5xelj.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--erOnxzFH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlastvd77vngsfw5xelj.jpg" alt="upload-ui-i" width="800" height="1733"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--436BnZUN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2q8pm3i56filfikffv7.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--436BnZUN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2q8pm3i56filfikffv7.jpg" alt="output-ui" width="800" height="1733"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xiKJYgig--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mk4h27y1m6tg8ws69ow.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xiKJYgig--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mk4h27y1m6tg8ws69ow.jpg" alt="output-typing" width="800" height="1733"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--s0D8H9Pn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbv79ufyg2tu58sl4nte.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--s0D8H9Pn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbv79ufyg2tu58sl4nte.jpg" alt="output" width="800" height="1733"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you create your own Flutter UI app using these widgets and share your code on GitHub, you can post the UI repository link in the comment section of this post. I would be delighted to review your code and provide suggestions on how to improve it.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Bonus&lt;/em&gt;&lt;br&gt;
If you check my code, I used MediaQuery where MediaQuery do create responsive and adaptive UI that can adjust their layout and behavior based on the device's screen size and other attributes&lt;br&gt;
example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  SizedBox(
                height: MediaQuery.of(context).size.height * 0.02,
          )
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I hope that this information proves to be helpful, and I look forward to sharing more in my future posts. Thank you.&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>dart</category>
      <category>widget</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Flutter Custom Widget</title>
      <dc:creator>Kishor Kc</dc:creator>
      <pubDate>Sun, 16 Apr 2023 04:21:26 +0000</pubDate>
      <link>https://forem.com/devkishor8007/flutter-custom-widget-2ol0</link>
      <guid>https://forem.com/devkishor8007/flutter-custom-widget-2ol0</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F71sojdsosflrnc03nxlv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F71sojdsosflrnc03nxlv.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Namaste Everyone&lt;/p&gt;

&lt;p&gt;I hope that you are doing well&lt;/p&gt;

&lt;p&gt;Have you ever thought about making a custom widget to make your code more straightforward? If not, allow me to guide you through the process and show you how it can reduce redundancy in your code.&lt;/p&gt;

&lt;p&gt;In this post, I will be sharing a custom widget that you can create. Custom widgets are great for making your code reusable and avoiding duplicate code.&lt;/p&gt;

&lt;p&gt;Below is a snippet of a Login UI Page where you can see the repetitive code of TextField. However, the email and password TextField widgets have different controller names, obscureText, and hintText values.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// pages/login.page.dart
class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State&amp;lt;LoginPage&amp;gt; createState() =&amp;gt; _LoginPageState();
}

class _LoginPageState extends State&amp;lt;LoginPage&amp;gt; {
  late final TextEditingController _email;
  late final TextEditingController _password;

  @override
  void initState() {
    super.initState();
    _email = TextEditingController();
    _password = TextEditingController();
  }

  @override
  void dispose() {
    super.dispose();
    _email.dispose();
    _password.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Login',
              style: TextStyle(
                fontSize: Theme.of(context).textTheme.headlineSmall!.fontSize,
              ),
            ),
            SizedBox(
              height: size.height * 0.01,
            ),
            TextFormField(
              controller: _email,
              obscureText: false,
              decoration: const InputDecoration(
                hintText: 'Enter your email..',
                hintStyle: TextStyle(
                  color: Colors.grey,
                ),
                border: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.green,
                    width: 1.0,
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(9),
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.green,
                    width: 1.0,
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(9),
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.green,
                    width: 1.0,
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(9),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: size.height * 0.01,
            ),
            TextFormField(
              controller: _password,
              obscureText: true,
              decoration: const InputDecoration(
                hintText: 'Enter your password..',
                hintStyle: TextStyle(
                  color: Colors.grey,
                ),
                border: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.green,
                    width: 1.0,
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(9),
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.green,
                    width: 1.0,
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(9),
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.green,
                    width: 1.0,
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(9),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: size.height * 0.025,
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Login'),
            ),
            SizedBox(
              height: size.height * 0.06,
            ),
          ],
        ),
      ),
    );
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After examining a lengthy code snippet of a Login UI Page, how do you feel?&lt;br&gt;
Take a deep breath and don't worry.&lt;/p&gt;

&lt;p&gt;Let me pause for a moment to think about how you could potentially simplify your code and design a custom widget for a TextFormField.&lt;/p&gt;

&lt;p&gt;Don't worry if you're not sure, I'm here to share with you the steps you can take to create a custom widget.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// widgets/custom_textfield.dart
class CustomTextField extends StatelessWidget {
  final TextEditingController controller;
  final String hintText;
  final bool obscureText;
  const CustomTextField({
    super.key,
    required this.controller,
    required this.hintText,
    this.obscureText = false,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: TextFormField(
        controller: controller,
        obscureText: obscureText,
        decoration: InputDecoration(
          hintText: hintText,
          hintStyle: const TextStyle(
            color: Colors.grey,
          ),
          border: const OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.green,
              width: 1.0,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(9),
            ),
          ),
          focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.green,
              width: 1.0,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(9),
            ),
          ),
          errorBorder: const OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.red,
              width: 1.0,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(9),
            ),
          ),
          enabledBorder: const OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.green,
              width: 1.0,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(9),
            ),
          ),
        ),
      ),
    );
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's great! So you have created the CustomTextField widget. Do you know how to utilize the CustomTextField widget that you have created?&lt;/p&gt;

&lt;p&gt;Also, regarding the snippet of CustomTextField widget, it's good to know that you can use it on any UI page wherever a form is needed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// pages/login.page.dart
  CustomTextField(
                controller: _email,
                hintText: 'Enter your email..',
              ),
  CustomTextField(
                controller: _password,
                hintText: 'Enter your password..',
                obscureText: isVisible,
              ),
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Bonus&lt;/strong&gt;&lt;br&gt;
We can create the another custom widget of Text.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// widgets/custom_text.dart
class CustomText extends StatelessWidget {
  final String text;
  final double? fontSize;
  final Color? color;
  final FontWeight? fontWeight;
  const CustomText(
      {super.key,
      required this.text,
      this.fontSize,
      this.fontWeight,
      this.color});

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        fontSize: fontSize,
        fontWeight: fontWeight,
        color: color,
      ),
    );
  }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once you have created the CustomText widget, it can be utilized wherever it is required in your code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// pages/homepage.dart
  CustomText(
       text: 'example',
       fontWeight: FontWeight.w800,
       fontSize: Theme.of(context)
            .textTheme
            .titleMedium!
            .fontSize,
          ),
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I hope you have found it helpful and enjoyable to learn how to create a custom widget in Flutter.&lt;br&gt;
Thank you.&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>dart</category>
      <category>widget</category>
      <category>mobile</category>
    </item>
  </channel>
</rss>
