DEV Community: Shan

Create Flavors for Flutter App - iOS

Shan — Sat, 13 Apr 2024 20:33:03 +0000

Note: If you're new to Flutter and find it tricky to sift through many resources on setting up flavors, this article is for you. Experienced Flutter developers might already be familiar with this so please feel free to skip this. If you just want to have a quick refresh then you can go through the videos 😁.

Note: It's better to save this for later reference.

Have you ever wanted to manage different versions of your Flutter app for different needs? 'Flavors' in Flutter help you do just that. They're similar to 'build configurations' in iOS. Using flavors, you can create a production version of your app for real users, a staging version for debugging, and a preview version for QA testing — all from the same code base.

To know more about 'Flavors' please go through the official documentation here.

Environment set up

Prerequisites:
- Xcode installed
- An existing Flutter project

Creating flavors in iOS

Open your project in Xcode by going to the iOS folder and double-clicking on the Runner.xcworkspace file. This action will launch Xcode for your project.

Step 2

The second step would be to define schemes. Select Product > Scheme > New Scheme from the menu to add a new Scheme.

A scheme describes how Xcode runs different actions. In this article we will define two schemes staging and production.

Step 3

Let's duplicate the existing build configurations to create separate configurations for different flavors. This process involves replicating the default configurations and appending "staging" and "production" as a suffix.

Step 4

Let's now edit the staging and production schemes to align with the newly created build configurations. Similarly, map the newly created build configurations to the production scheme.

Step 5

Now that we've got our staging and production flavors ready, we can assign different bundle identifiers for each.

Give it a shot—assign the bundle identifier for the production flavor yourself! 😁

Step 6

In the Build Settings, set the Product Name value to match each flavor. For example, add Todo Staging. For those unfamiliar, the product name in Xcode refers to the name of the app as it appears in the App Store and on devices once it's installed. Also we will be using this product name in the next step.

Oops! no video for production😌. Please try to do it yourself!

Step 7

Add the display name to Info.plist. Update the Bundle Display Name value to $(PRODUCT_NAME). When we set the Bundle Display Name to $(PRODUCT_NAME), Xcode dynamically replaces it with the actual product name of our app during the build process.

Step 8

Now it's time to setup our app icon for our staging flavor. When we create your project from a template, it automatically includes a default asset catalog (Assets.xcassets) that contains the AppIcon.

If we don’t have a default asset catalog or existing AppIcon or we want to add another, we can add an app icon to an asset catalog manually:

In the Project navigator, select an asset catalog.
Click the Add button (+) at the bottom of the outline view.
In the pop-up menu, choose OS variant > OS variant App Icon. Xcode creates a new app icon set or image stack with the name AppIcon.

Step 9

Now that we've created the asset catalog, it's time to add the icons. To ensure compatibility with all the sizes specified in Xcode, we'll need to generate icons for each size. I typically use an app icon generator like appicon.co for this.

Once you've generated the icons, simply download them and then either drag and drop them directly into the new staging asset catalog in Xcode or into the designated folder, following the steps outlined in the video.

Next, we'll need to associate the build configuration with the newly created app icon set name.

Please follow the same steps for production as well.

Step 10

"Hurray 🎉! We're almost done. Now it's time to test the changes we've made so far.

In Android Studio, add flavor configurations for both staging and production, as shown in the screenshot below:

Let's try running the staging app. If everything works fine, you should see the app installed on your emulator, similar to the screenshot below.

The Art of Inferring with Large Language Models

Shan — Tue, 23 May 2023 20:03:16 +0000

Note: This is a documented version of ChatGPT Prompt Engineering for Developers course. You can find the course here.

Inferring is a powerful tool that can be used to extract meaning from text. It can be used to understand customer feedback, to identify trends in social media.

Here are some examples of how inferring can be used in prompt engineering:

Sentiment analysis: Inferring can be used to identify the sentiment of a piece of text, such as whether it is positive, negative, or neutral. This can be used to understand customer feedback, identify trends in social media, and generate new ideas.

Eg: We can use sentiment analysis to categorize playstore reviews into positive, negative, or neutral reviews. This will help us to prioritise the issues mentioned in the reviews and identify the issues that need to be addressed. This will allow the customer support team to quickly identify and resolve issues, and the engineers to focus on fixing high priority bugs.

Topic modeling: Inferring can be used to identify the topics of a piece of text. This can be used to understand the content of a document, identify patterns in data, and generate new ideas.

Named entity recognition: Inferring can be used to identify named entities in a piece of text, such as people, places, and organizations. This can be used to understand the context of a document, identify potential customers, and generate new ideas.

For example, if you are running an e-commerce website and you have received reviews from consumers who have purchased from your website, you can use a large language model (LLM) to analyse the reviews and identify named entities, such as the shop name and product name. This information can then be used to improve the customer experience, such as by recommending similar products or providing customer support.

Section from the course starts here:

*In this article we will infer sentiment and topics from product reviews and news articles. *

lamp_review = """
Needed a nice lamp for my bedroom, and this one had \
additional storage and not too high of a price point. \
Got it fast.  The string to our lamp broke during the \
transit and the company happily sent over a new one. \
Came within a few days as well. It was easy to put \
together.  I had a missing part, so I contacted their \
support and they very quickly got me the missing piece! \
Lumina seems to me to be a great company that cares \
about their customers and products!!
"""


What is the sentiment of the following product review, 
which is delimited with triple single quotes?

Review text: '''{lamp_review}'''

Output:

As you can see from the screenshot it's a long output. We can ask the LLM to either output positive / negative as keywords.

"""
What is the sentiment of the following product review, 
which is delimited with triple single quotes?

Give your answer as a single word, either "positive" \
or "negative".

Review text: '''{lamp_review}'''
"""

Output:

we can ask an LLM to identify the emotions that the writer of a review is expressing. We can also ask the LLM if the writer is expressing any anger in their review. Additionally, we can ask the LLM to identify the company name and product name from the review. All of these tasks can be performed in a single prompt.

"""
Identify the following items from the review text: 
- Sentiment (positive or negative)
- List all the emotions expressed in the review not more than 5
- Is the reviewer expressing anger? (true or false)
- Item purchased by reviewer
- Company that made the item

The review is delimited with triple backticks. \
Format your response as a JSON object with \
"Sentiment", "Anger", Emotions, "Item" and "Brand" as the keys.
If the information isn't present, use "unknown" \
as the value.
Make your response as short as possible.
Format the Anger value as a boolean.

Review text: '''{lamp_review}'''
"""

Next topic in the course topic analysis 🙃.

Inferring can be used to identify the topics of a piece of long text.

story = """
In a recent survey conducted by the government, 
public sector employees were asked to rate their level 
of satisfaction with the department they work at. 
The results revealed that NASA was the most popular 
department with a satisfaction rating of 95%.

One NASA employee, John Smith, commented on the findings, 
stating, "I'm not surprised that NASA came out on top. 
It's a great place to work with amazing people and 
incredible opportunities. I'm proud to be a part of 
such an innovative organization."

The results were also welcomed by NASA's management team, 
with Director Tom Johnson stating, "We are thrilled to 
hear that our employees are satisfied with their work at NASA. 
We have a talented and dedicated team who work tirelessly 
to achieve our goals, and it's fantastic to see that their 
hard work is paying off."

The survey also revealed that the 
Social Security Administration had the lowest satisfaction 
rating, with only 45% of employees indicating they were 
satisfied with their job. The government has pledged to 
address the concerns raised by employees in the survey and 
work towards improving job satisfaction across all departments.
"""

Determine five topics that are being discussed in the \
following text, which is delimited by triple backticks.

Make each item one or two words long. 

Format your response as a list of items separated by commas.

Text sample: '''{story}'''

As you can see from the output we got different topics in the article that we gave to the LLM. This information can be used to recommend articles to users who are interested in those topics.

For example, Suppose if a user is subscribed to the topics "java, javascript, and AI," and the user wants to only receive article suggestions based on his/her subscription the LLM can be used to identify the topic and we could create a service that will send notifications when a new article on any of those topic comes.

Output:

Iterative Prompt Development: Iteratively analyse and refine your prompts

Shan — Sun, 21 May 2023 13:07:43 +0000

Note: This is a documented version of ChatGPT Prompt Engineering for Developers course. You can find the course here.

Note: This article is pretty boring. I have added a general summary here for all those who don't have time to read this.

In this article, we will see how to iteratively analyse and refine prompts to generate marketing copy from a product fact sheet. We will start with a simple prompt that generated a long, rambling text. We then iteratively will refine the prompt to limit the number of words, focus on the relevant details, and include the product IDs. Finally, we will add a table of dimensions. By following this iterative approach, we will be able to generate a concise and polished output that meets the needs of the marketing team. This is based on the example that is mentioned in the course.

Note: Before reading this please try to read two another articles which is part of this course. It will give you a general guidelines on how to interact with LLM in a better way.

Note: In this Article, you'll learn how to iteratively analyse and refine prompts.

We will iteratively analyse and refine our prompts to generate marketing copy from a product fact sheet.

fact_sheet_chair = """
OVERVIEW
- Part of a beautiful family of mid-century inspired office furniture, 
including filing cabinets, desks, bookcases, meeting tables, and more.
- Several options of shell color and base finishes.
- Available with plastic back and front upholstery (SWC-100) 
or full upholstery (SWC-110) in 10 fabric and 6 leather options.
- Base finish options are: stainless steel, matte black, 
gloss white, or chrome.
- Chair is available with or without armrests.
- Suitable for home or business settings.
- Qualified for contract use.

CONSTRUCTION
- 5-wheel plastic coated aluminum base.
- Pneumatic chair adjust for easy raise/lower action.

DIMENSIONS
- WIDTH 53 CM | 20.87”
- DEPTH 51 CM | 20.08”
- HEIGHT 80 CM | 31.50”
- SEAT HEIGHT 44 CM | 17.32”
- SEAT DEPTH 41 CM | 16.14”

OPTIONS
- Soft or hard-floor caster options.
- Two choices of seat foam densities: 
 medium (1.8 lb/ft3) or high (2.8 lb/ft3)
- Armless or 8 position PU armrests 

MATERIALS
SHELL BASE GLIDER
- Cast Aluminum with modified nylon PA6/PA66 coating.
- Shell thickness: 10 mm.
SEAT
- HD36 foam

COUNTRY OF ORIGIN
- Italy
"""

Your task is to help a marketing team create a 
description for a retail website of a product based 
on a technical fact sheet.

Write a product description based on the information 
provided in the technical specifications delimited by 
triple hyphen.

Technical specifications: ---{fact_sheet_chair}---

As the prompt is bit big. When I unleashed this on GPT-3, it erupted with a whopping 369 words!😁. I won't be sharing the output here as it's a long text. To limit the number of words to certain limit we can tell GPT to generate at most x amount of words.

The new prompt will be:

Your task is to help a marketing team create a 
description for a retail website of a product based 
on a technical fact sheet.

Write a product description based on the information 
provided in the technical specifications delimited by 
triple hyphen.

Use at most 50 words.

Technical specifications: ---{fact_sheet_chair}---

In this prompt we are mentioning the number of words to GPT to limit the output.

Issue 2 of the generated output: Text focuses on the wrong details.


Your task is to help a marketing team create a 
description for a retail website of a product based 
on a technical fact sheet.

Write a product description based on the information 
provided in the technical specifications delimited by 
triple hyphen.

The description is intended for furniture retailers, 
so should be technical in nature and focus on the 
materials the product is constructed from.

Use at most 50 words.

Technical specifications: ---{fact_sheet_chair}---

Here in this prompt we are asking the model to focus on the aspects that are relevant to the intended audience. Here we need to generate the description for furniture retailers.

Output:

We can further improve this prompt to attach the product ids in the description. The updated prompt will be:

"""
Your task is to help a marketing team create a 
description for a retail website of a product based 
on a technical fact sheet.

Write a product description based on the information 
provided in the technical specifications delimited by 
triple hyphen.

The description is intended for furniture retailers, 
so should be technical in nature and focus on the 
materials the product is constructed from.

At the end of the description, include every 7-character 
Product ID in the technical specification.

Use at most 50 words.

Technical specifications: ---{fact_sheet_chair}---
"""

Output:

Issue 3 - Description needs a table of dimensions

We can ask the model to generate a table for us along with the description. Here we will be generating a table of dimensions.

Your task is to help a marketing team create a 
description for a retail website of a product based 
on a technical fact sheet.

Write a product description based on the information 
provided in the technical specifications delimited by 
triple hyphen.

The description is intended for furniture retailers, 
so should be technical in nature and focus on the 
materials the product is constructed from.

At the end of the description, include every 7-character 
Product ID in the technical specification.

After the description, include a table that gives the 
product's dimensions. The table should have two columns.
In the first column include the name of the dimension. 
In the second column include the measurements in inches only.

Give the table the title 'Product Dimensions'.

Format everything as HTML that can be used in a website. 
Place the description in a <div> element.

Technical specifications: ---{fact_sheet_chair}---

Output generated is in HTML. I am not going to add the screenshot here as the output is a bit long. You can copy and paste this prompt to know how the output will look like.

Here is another example of how the iterative approach can be used to improve the quality of generated outputs. Let's say you want to write a poem about a flower. Your first prompt might be something like this:

Write a poem about a flower.

This prompt is too general and will likely result in a poem that is not very specific or creative. To improve the prompt, you could add more details about the flower, such as its colour, shape, or smell. You could also specify the tone of the poem, such as whether you want it to be happy, sad, or reflective.

Write a happy poem about a red lily.

This prompt is more likely to result in a poem that is both specific and creative. Once you have written the poem, you can then evaluate it and see if it meets your needs. If not, you can iterate on the prompt and try again until the desired output is achieved.

Principle 2 of Writing Effective Prompts for Large Language Models: Give Them Time to Think

Shan — Sat, 20 May 2023 05:42:14 +0000

Note: This is a documented version of ChatGPT Prompt Engineering for Developers course. You can find the course here.

Note: In this Article, you'll practice one prompting principle and it's related tactics in order to write effective prompts for large language models. You can view my previous article here.

Principle 2: Give the model time to “think”.

Large language models can make reasoning errors by rushing to an incorrect conclusion. This can happen if the model is given a task that is too complex or if it is not given enough time to consider all of the evidence. To prevent this, you can reframe the query to request a chain or series of relevant reasoning. This will help the model to slow down and consider all of the evidence before drawing a conclusion. Just like humans, large language models can make mistakes if they are rushed or given too much to do. Instructing the model to think longer about a problem can help to improve its accuracy.

Here are some tips for reframing a query to request a chain or series of relevant reasoning:

Use the word "explain" or "justify" in your query.
Ask the model to provide evidence to support its conclusion.
Ask the model to consider all of the relevant information.

These are the outputs that were generated for the same question asked in different ways.

Tactic 1: Specify the steps required to complete a task

text = """
In a charming village, siblings Jack and Jill set out on \ 
a quest to fetch water from a hilltop \ 
well. As they climbed, singing joyfully, misfortune \ 
struck—Jack tripped on a stone and tumbled \ 
down the hill, with Jill following suit. \ 
Though slightly battered, the pair returned home to \ 
comforting embraces. Despite the mishap, \ 
their adventurous spirits remained undimmed, and they \ 
continued exploring with delight.
"""

prompt_1 = """
Perform the following actions: 
1 - Summarise the following text delimited by triple \
hyphen with 1 sentence.
2 - Translate the summary into French.
3 - List each name in the French summary.
4 - Output a json object that contains the following \
keys: french_summary, num_names.

Separate your answers with line breaks.

Text:
---{text}---
"""

In this prompt we are specifying all the steps that should be performed by the model before arriving at a conclusion.
As seen from the screenshot, the model provided a clear and concise answer for our query.

Let us try to give another prompt that will give us a more structured output.

text = """
In a charming village, siblings Jack and Jill set out on \ 
a quest to fetch water from a hilltop \ 
well. As they climbed, singing joyfully, misfortune \ 
struck—Jack tripped on a stone and tumbled \ 
down the hill, with Jill following suit. \ 
Though slightly battered, the pair returned home to \ 
comforting embraces. Despite the mishap, \ 
their adventurous spirits remained undimmed, and they \ 
continued exploring with delight.
"""

Your task is to perform the following actions: 
1 - Summarise the following text delimited by 
  <> with 1 sentence.
2 - Translate the summary into French.
3 - List each name in the French summary.
4 - Output a json object that contains the 
  following keys: french_summary, num_names.

Use the following format:

Summary: summary
Translation: summary translation
Names: list of names in Italian summary
Output JSON: json with summary and num_names

Text: <{text}>

As seen from the screenshot the output is now more structured and follows a format.

Output:

Tactic 2: Instruct the model to work out its own solution before rushing to a conclusion

Determine if the student's solution is correct or not.

Question:
I'm building a solar power installation and I need \
 help working out the financials. 
- Land costs $100 / square foot
- I can buy solar panels for $250 / square foot
- I negotiated a contract for maintenance that will cost \ 
me a flat $100k per year, and an additional $10 / square \
foot

What is the total cost for the first year of operations 
as a function of the number of square feet.

Student's Solution:

Let x be the size of the installation in square feet.
Costs:
1. Land cost: 100x
2. Solar panel cost: 250x
3. Maintenance cost: 100,000 + 100x
Total cost: 100x + 250x + 100,000 + 100x = 450x + 100,000

This prompt will give the output as the student's answer is correct but the answer is wrong because the calculation "100,000 + 100x" is wrong it should be "100,000 + 10x". So the answer should be "360x + 100,000".

Output:

To get the correct output we need to ask the model to first generate it's own answer and then compare the answer with the student's answer. Here we asking the model to do it's own analysis on the question and generate an answer for us.

To solve the problem do the following:
- First, work out your own solution to the problem. 
- Then compare your solution to the student's solution 
and evaluate if the student's solution is correct or not. 
Don't decide if the student's solution is correct until 
you have done the problem yourself.

Use the following format:
Question:
----
question here
----

Student's solution:
----
student's solution here
----

Actual solution:
----
steps to work out the solution and your solution here
----

Is the student's solution the same as actual solution \
just calculated:
---
yes or no
---

Student grade:
---
correct or incorrect
----

Question:
""""
I'm building a solar power installation and I need help \
working out the financials. 
- Land costs $100 / square foot
- I can buy solar panels for $250 / square foot
- I negotiated a contract for maintenance that will cost \
me a flat $100k per year, and an additional $10 / square \
foot
What is the total cost for the first year of operations \
as a function of the number of square feet.
""""
Student's solution:
""""
Let x be the size of the installation in square feet.
Costs:
1. Land cost: 100x
2. Solar panel cost: 250x
3. Maintenance cost: 100,000 + 100x
Total cost: 100x + 250x + 100,000 + 100x = 450x + 100,000
""""
Actual solution:

Output:

This is an example of how asking the model to do a calculation itself and breaking down the task into steps to give the model more time to think can help you
get more accurate responses. Here i am using hyphen and triple double quotes as delimiters. You can use any delimiters as you like.

To improve the accuracy and quality of the responses from large language models, it is important to give them time to "think". This can be done by reframing your query to request a chain or series of relevant reasoning, or by instructing the model to work out its own solution before rushing to a conclusion. Additionally, it is important to be as specific as possible in your queries, use natural language, use keywords, and be patient when waiting for a response.

Writing Effective Prompts for Large Language Models: Two Prompting Principles and Their Related Tactics

Shan — Fri, 19 May 2023 18:42:11 +0000

Note: This is a documented version of ChatGPT Prompt Engineering for Developers course. You can find the course here.

Note: In this Article, you'll practice one prompting principle and it's related tactics in order to write effective prompts for large language models. I will create another article on principle 2.

Prompting Principles

Principle 1: Write clear and specific instructions.
Principle 2: Give the model time to “think”.

Tactic 1: Use delimiters to clearly indicate distinct parts of the input.

Delimiters can be anything like:

Triple Quotes: ''' '''

Triple Backticks:```

Triple Dashes: --- ---

Angle Brackets: <>

Xml Tags: <tag> </tag>

For example:


text = """
You should express what you want a model to do by \ 
providing instructions that are as clear and \ 
specific as you can possibly make them. \ 
This will guide the model towards the desired output, \ 
and reduce the chances of receiving irrelevant \ 
or incorrect responses. Don't confuse writing a \ 
clear prompt with writing a short prompt. \ 
In many cases, longer prompts provide more clarity \ 
and context for the model, which can lead to \ 
more detailed and relevant outputs.
"""

prompt = """
Summarise the text delimited by angle brackets\ 
into a single sentence.
<text>
"""

Output that i got after giving this prompt to chat GPT.

Tactic 2: Ask for a structured output

JSON, HTML

"""
Generate a list of three made-up book titles along \ 
with their authors and genres. 
Provide them in JSON format with the following keys: 
book_id, title, author, genre.
"""

This prompt will generate the output in json format. If we change the value JSON to HTML then the output will be in HTML format.

JSON

{
"books": [
{
"book_id": 1,
"title": "The Secret Garden",
"author": "Emily Greenfield",
"genre": "Children's Fiction"
},
{
"book_id": 2,
"title": "Midnight Shadows",
"author": "Jacob Nightfall",
"genre": "Thriller"
}
]
}

For those who don't know what is JSON and HTML it is fine. HTML is a markup language used for structuring and presenting web content, while JSON is a data interchange format used for storing and exchanging structured data.

Tactic 3: Ask the model to check whether conditions are satisfied

text_1 = """
Making a cup of tea is easy! First, you need to get some \ 
water boiling. While that's happening, \ 
grab a cup and put a tea bag in it. Once the water is \ 
hot enough, just pour it over the tea bag. \ 
Let it sit for a bit so the tea can steep. After a \ 
few minutes, take out the tea bag. If you \ 
like, you can add some sugar or milk to taste. \ 
And that's it! You've got yourself a delicious \ 
cup of tea to enjoy.
"""
prompt = """
You will be provided with text delimited by triple quotes. 
If it contains a sequence of instructions, \ 
re-write those instructions in the following format:

Step 1 - ...
Step 2 - …
…
Step N - …

If the text does not contain a sequence of instructions, \ 
then simply write \"No steps provided.\"

\"\"\"{text_1}\"\"\"
"""

Output:

An effective use case for this tactic involves providing a code snippet that encompasses essential business logic, and subsequently leveraging AI to verify the comprehensive handling of all conditions within the code.

text_2 = """
The sun is shining brightly today, and the birds are \
singing. It's a beautiful day to go for a \ 
walk in the park. The flowers are blooming, and the \ 
trees are swaying gently in the breeze. People \ 
are out and about, enjoying the lovely weather. \ 
Some are having picnics, while others are playing \ 
games or simply relaxing on the grass. It's a \ 
perfect day to spend time outdoors and appreciate the \ 
beauty of nature.
"""
prompt = """
You will be provided with text delimited by triple quotes. 
If it contains a sequence of instructions, \ 
re-write those instructions in the following format:

Step 1 - ...
Step 2 - …
…
Step N - …

If the text does not contain a sequence of instructions, \ 
then simply write \"No steps provided.\"

\"\"\"{text_2}\"\"\"
"""

In this example you can clearly see there are not tasks mentioned in the text. Since there are not steps we need to get "No steps provided." as the output.

Output:

Tactic 4: "Few-shot" prompting

prompt = """
Your task is to answer in a consistent style.

<child>: Teach me about patience.

<grandparent>: The river that carves the deepest \ 
valley flows from a modest spring; the \ 
grandest symphony originates from a single note; \ 
the most intricate tapestry begins with a solitary thread.

<child>: Teach me about resilience.
"""

This tactic involves training the model with successful examples of tasks and subsequently requesting the model to perform a specific task based on the provided examples.

In conclusion, Principle 1 emphasizes the significance of providing clear and specific instructions to ChatGPT in order to achieve desired outputs. By expressing instructions in a precise manner, we guide the model towards the intended outcome and minimize the risk of irrelevant or incorrect responses. This principle emphasizes that clarity should not be compromised for the sake of brevity, as longer prompts can provide additional context and enhance the quality of the model's responses. When crafting prompts, it is essential to focus on writing instructions that are as explicit as possible, leaving no room for ambiguity. Following Principle 1 ensures that we harness the full potential of ChatGPT and obtain detailed and relevant outputs that align with our expectations.

Boost Your Productivity: How to Create and Use Custom Snippets in VS Code

Shan — Sat, 01 Apr 2023 04:25:36 +0000

As a developer, you might find yourself frequently using the same code patterns or syntax. Repeatedly typing out the same code can be tedious and can slow down your workflow. This is where snippets come in handy.

Visual Studio Code (VS Code) provides a built-in feature for defining and using snippets. Snippets are predefined templates of code that you can insert into your code file using a simple keyboard shortcut. In this article, we’ll explore how to create and use snippets in VS Code.

Defining Snippets

VS Code provides an easy way to create and define your own snippets. You can define snippets either for a specific language or for all languages. To create or edit your own snippets, go to the Command Palette by pressing Ctrl+Shift+P (Windows, Linux) or Cmd+Shift+P (macOS), and then search for "Configure User Snippets". Selecting this option will bring up a dropdown menu that allows you to choose a language-specific snippets file or a global snippets file.

Snippets files are written in JSON format, which supports C-style comments, and can define an unlimited number of snippets. Snippets support most TextMate syntax for dynamic behavior and can intelligently format whitespace based on the insertion context.

Let’s look at an example of defining a snippet for a JavaScript for loop:

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

In this example, For Loop is the name of the snippet. It will be displayed via IntelliSense if no description is provided. The prefix property defines one or more trigger words that display the snippet in IntelliSense. Substring matching is performed on prefixes, so in this case, fc could match for-const. The body property is one or more lines of content, which will be joined as multiple lines upon insertion. Newlines and embedded tabs will be formatted according to the context in which the snippet is inserted. Finally, the description property is an optional description of the snippet displayed by IntelliSense.

Additionally, the body of the example above has three placeholders (listed in order of traversal): ${1:array}, ${2:element}, and $0. You can quickly jump to the next placeholder with Tab, at which point you may edit the placeholder or jump to the next one. The string after the colon : (if any) is the default text, for example element in ${2:element}. Placeholder traversal order is ascending by number, starting from one; zero is an optional special case that always comes last and exits snippet mode with the cursor at the specified position.

Using Snippets

Once you’ve defined your snippets, you can start using them in your code. To insert a snippet, simply type the prefix in your code file and press Tab. The snippet will then be inserted into your code with the cursor placed at the first placeholder. You can then use Tab to jump to the next placeholder or use Shift+Tab to jump to the previous one.

For example, if we had the "For Loop" snippet defined as above, we could use it in our JavaScript file by typing for and then pressing Tab. The snippet would be inserted into the code, and we could then fill in the placeholders as needed.

More Detailed Example

If you're interested in using the 'Freezed' package in Flutter, I've created a handy VS Code extension that provides code snippets to speed up your development process. You can find the extension on GitHub at https://github.com/ArkrootHQ/freezed-snippets, and it's completely free to use. If you have any suggestions or ideas for improving the extension, feel free to contribute to the project. Your contributions are always welcome and greatly appreciated!

Here's a quick overview of the snippets currently included in the extension.

{
  "Part statement": {
    "prefix": "pts",
    "body": ["part '${TM_FILENAME_BASE}.g.dart';"],
    "description": "Creates a filled-in part statement"
  },
  "Part 'Freezed' statement": {
    "prefix": "ptf",
    "body": ["part '${TM_FILENAME_BASE}.freezed.dart';"],
    "description": "Creates a filled-in freezed part statement"
  },
  "Freezed Data Class": {
    "prefix": ["fdataclass", "fdc"],
    "body": [
      "@freezed",
      "class ${1:DataClass} with _$${1:DataClass}{",
      "  const factory ${1:DataClass}(${2}) = _${1:DataClass};",
      "}",
      "factory ${1:DataClass}.fromJson(Map<String, dynamic> json)",
      "=> _$${1:DataClass}FromJson(json);"
    ],
    "description": "Freezed Data Class"
  },
  "Freezed Union": {
    "prefix": "funion",
    "body": [
      "@freezed",
      "class ${1:Union} with _$${1:Union}{",
      "  const factory ${1:Union}.${2}(${4}) = ${3};",
      "}"
    ],
    "description": "Freezed Union"
  },
  "Freezed Union Case": {
    "prefix": "funioncase",
    "body": ["const factory ${1:Union}.${2}(${4}) = ${3};"],
    "description": "Freezed Union Case"
  }
}

Here is an explanation of each snippet:

"Part statement": inserts a filled-in "part" statement for the current file.
"Part 'Freezed' statement": inserts a filled-in "part" statement for the generated Freezed file.
"Freezed Data Class": creates a new Freezed data class with a constructor and a "fromJson" factory method.
"Freezed Union": creates a new Freezed union with a specified number of cases.
"Freezed Union Case": inserts a new case into an existing Freezed union.

Conclusion

Snippets are a powerful feature in VS Code that can greatly increase your productivity as a developer. By defining your own snippets, you can save time

What are pre-commit hooks and How to use in flutter projects?

Shan — Sat, 11 Mar 2023 07:42:02 +0000

Version control systems (VCS) like Git are essential tools for software development, allowing developers to track changes to their code and collaborate with others. One important feature of Git is the ability to use pre-commit hooks, which are scripts or programs that are run automatically before a commit is made. Pre-commit hooks can be used to perform various checks and validations on the code changes being committed, ensuring that they meet certain standards or requirements.

In this article, we'll discuss what pre-commit hooks are, why they're useful, and how to configure them in a Flutter project. We'll also discuss some examples of pre-commit hooks you can use in your projects.

What is a Pre-Commit Hook?

A pre-commit hook is a script or program that is executed automatically before a commit is made to a VCS. A pre-commit hook aims to check the changes being committed to ensure they meet certain standards or requirements. For example, a pre-commit hook might be used to enforce code style guidelines, prevent certain files from being committed, or check for syntax errors and other issues.

Why use Pre-Commit Hooks?

Pre-commit hooks offer several benefits to software development teams:

Consistency: Pre-commit hooks can enforce consistent coding standards and practices across the entire team, ensuring that all code adheres to the same guidelines.
Error prevention: By running automated checks before commits are made, pre-commit hooks can catch errors and other issues early in the development process, preventing them from being introduced into the codebase.
Time savings: Pre-commit hooks can automate time-consuming tasks such as linting and code formatting, freeing up developers to focus on more important tasks.
Collaboration: Pre-commit hooks can help ensure that all team members are aware of code changes and are able to review them before they are committed.

Configuring Pre-Commit Hooks in a Flutter Project:

Configuring a pre-commit hook in a Flutter project involves creating a script that will be executed before a commit is made, and then configuring Git to run that script automatically. Here are the steps to configure a pre-commit hook in a Flutter project:

Step 1: Create a Pre-Commit Hook Script

The first step is to create a pre-commit hook script that will be run automatically before each commit. This script can be written in any scripting language, but in this article, we'll be using Bash.

Create a file named pre-commit (without any file extension since we are using bash) in the .git/hooks/ directory of your project. If the .git/hooks/ directory does not exist, create it.

Here's an example pre-commit hook script that runs flutter analyze and dart analyze to check for errors in the code:

#!/bin/bash

# Run Flutter analyze and check for errors
if ! output=$(flutter analyze); then
    echo "COMMIT REJECTED: Flutter analyze found the following errors:"
    echo "$output"
    exit 1
fi

# Run Dart analyze and check for errors
if ! output=$(dart analyze); then
    echo "COMMIT REJECTED: Dart analyze found the following errors:"
    echo "$output"
    exit 1
fi

# If we made it this far, the commit is allowed
exit 0

This script runs flutter analyze and dart analyze to check for errors in the code. If either command detects an error, the commit will be rejected.

Step 2: Make the Script Executable

Next, you'll need to make the script executable. To do this, open a terminal and navigate to your Flutter project directory. Then, run the following command:

chmod +x pre-commit

This command gives the pre-commit script executable permissions.

Step 3: Configure Git to Run the Script

The final step is to configure Git to run the pre-commit hook script automatically before each commit. To do this, navigate to your Flutter project directory in a terminal and run the following command:

cd .git/hooks
ln -s ../../pre-commit pre-commit

This command creates a symbolic link to the pre-commit script in the .git/hooks directory, which Git will use to run the script automatically before each commit.

If you have successfully configured a pre-commit hook in your Flutter project and if your codebase has analyzer problems, then you will get an error message indicating that the commit has been rejected.

That's it! You've now configured a pre-commit hook in your Flutter project.

Pre-commit hooks are a powerful tool for ensuring code quality and consistency in your Flutter projects. They can be used to enforce coding standards, catch errors and security vulnerabilities, and automate time-consuming tasks. By following the steps outlined in this article, you can easily configure pre-commit hooks in your own projects and improve your development workflow.

Bonus

You can find an easy to use pre-commit hook here.

Equatable package in dart

Shan — Fri, 03 Feb 2023 16:21:26 +0000

The equatable package in Flutter is a powerful tool for comparing objects. It allows developers to easily determine if two objects have the same properties and values, which can be especially useful when working with complex data structures or implementing value types in their Flutter apps.

The equatable package provides a base Equatable class that we can extend to create our own custom value types. To use the package, we need to import it in our dart file and extend the Equatable class.

Here is an example of how to use equatable to create a custom value type called Person:

import 'package:equatable/equatable.dart';

class Person extends Equatable {
  final String name;
  final int age;

  Person({required this.name, required this.age});

  @override
  List<Object> get props => [name, age];
}

In this example, the Person class extends Equatable and implements the props getter. The props getter is used to specify which properties of the object should be used to determine equality. In this case, the name and age properties of two Person objects are being compared.

Once you have defined your custom value type, you can use the == operator to compare two instances of that type:

final person1 = Person(name: 'John', age: 30);
final person2 = Person(name: 'John', age: 30);

print(person1 == person2); // true

Alternatively, you can use the isEquals method to compare two instances of your custom value type:

final person1 = Person(name: 'John', age: 30);
final person2 = Person(name: 'John', age: 30);

print(Equatable.is(person1, person2)); // true

You can also use equatable package to compare a list of objects.

final people1 = [
  Person(name: 'John', age: 30),
  Person(name: 'Mike', age: 25),
];

final people2 = [
  Person(name: 'John', age: 30),
  Person(name: 'Mike', age: 25),
];

print(Equatable.listEquals(people1, people2)); // true

The equatable package uses the == operator and the hashCode method to determine equality between objects. When the == operator is called on two objects, equatable compares the values of the properties specified in the props getter to determine if they are equal. If the props getter is not implemented or is empty, equatable will use the hashCode method to compare the objects.

It’s important to note that equatable only compares the properties that you specify in the props getter. If you need to compare other properties or custom logic, you should implement the == operator and hashCode in your custom class.

Using equatable package can make your code more robust and maintainable, as it allows you to easily compare complex data structures and value types. It can be especially useful when working with large and complex data structures, as it provides an easy and consistent way to determine equality between objects.

Another important feature of the equatable package is that it can help to improve the performance of your app. When you use the == operator to compare two objects, the equatable package will only compare the properties specified in the props getter, rather than comparing all properties of the object. This can greatly reduce the amount of computation required to determine equality, especially when comparing large data structures or collections of objects.

Additionally, the equatable package can be used in conjunction with other popular Flutter packages, such as provider and bloc, to help manage and compare the state of your app. For example, you can use the equatable package to compare the state of a provider or bloc before and after an update, and only rebuild the parts of your app that have changed.

In summary, the equatable package is a powerful tool for comparing objects in Flutter. It provides a simple and consistent way to determine equality between objects, and can greatly improve the performance of your app when working with complex data structures or collections of objects. Whether you are working on a simple app or a large and complex project, the equatable package is a valuable tool to have in your toolbox.

What are contexts in flutter?

Shan — Thu, 02 Feb 2023 09:21:07 +0000

In Flutter, the context refers to the location of a widget in the widget tree. It provides information about the surrounding environment and services that the widget might need.

For example, the context can contain information such as the theme of the app, the locale, the screen size, and more. By accessing the context, a widget can make decisions about how to display itself based on the context.

In Flutter, the context is passed down the widget tree from parent to child, allowing child widgets to access the context of their parent and ancestors. This makes it possible for widgets to use information from higher up in the tree, without having to pass it down as an argument to every widget along the way.

There are different ways to access the context in Flutter, but the most common one is by using the BuildContext argument in the build method of a widget. You can also access the context from event handlers, such as onPressed, by using the context argument in the callback.

By using the context, you can create reusable widgets that can adapt to the environment and services they are used in, making it easier to create complex and flexible user interfaces.
In more simple way we can think of context in Flutter like a backpack that you wear everywhere you go. The backpack contains things that you need to know about where you are and what you're doing.

For example, it might have information about the place you're at, what time it is, and what your favorite color is.

When you're building a toy with Flutter, you want your toy to know some of the things that are in your backpack. For example, you might want your toy to know what the color of your backpack is, so it can be painted that color. The context is like a way to pass information from your backpack to your toy.

Just like how you can pass your backpack to your friends, the context gets passed from one Flutter widget to another. This way, your toy can have access to all the information it needs, without having to ask you for it every time it needs to know something.

If (understood) return;

Still couldn't understand? continue your reading.

Imagine you're building a toy house. You want your toy house to know the theme of the room it's in, so it can be decorated accordingly. The theme might be "beach house," for example, so the toy house will be decorated with seashells, sand, and other beach-related items.

To provide the theme information to the toy house, you could pass it down as an argument every time you create a new widget. However, this quickly becomes unwieldy and hard to maintain, especially as your toy house becomes more complex and has more parts.

With contexts in Flutter, you can define the theme information once, at the root of the widget tree, and have it be automatically available to all the widgets further down the tree. The widgets can access the context without having to know anything about the widgets higher up in the tree.

In this way, contexts make it easier to manage the flow of information in your Flutter app, and to create reusable and flexible widgets that can adapt to their environment and the services they need.

class ThemeChanger extends StatefulWidget {
  final Widget child;
  final String theme;

  ThemeChanger({@required this.child, @required this.theme});

  @override
  _ThemeChangerState createState() => _ThemeChangerState();
}

class _ThemeChangerState extends State<ThemeChanger> {
  String _currentTheme;

  @override
  void initState() {
    _currentTheme = widget.theme;
    super.initState();
  }

  void changeTheme(String newTheme) {
    setState(() {
      _currentTheme = newTheme;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: _currentTheme == "green" ? ThemeData(primarySwatch: Colors.green) : ThemeData(primarySwatch: Colors.blue),
      child: widget.child,
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Context Example"),
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              final themeChanger =
                  context.ancestorWidgetOfExactType(ThemeChanger);
              themeChanger.changeTheme(themeChanger._currentTheme == "green" ? "blue" : "green");
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("The theme can be changed dynamically"),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(
    ThemeChanger(
      theme: "green",
      child: MaterialApp(
        home: MyHomePage(),
      ),
    ),
  );
}

In this version, the MyHomePage widget has an action in the app bar that allows the user to change the theme. When the user taps the refresh icon, the theme is changed from green to blue or vice versa.

The MyHomePage widget uses the ancestorWidgetOfExactType method to access the ThemeChanger widget, which is the parent widget that holds the current theme. It then calls the changeTheme method on the ThemeChanger widget to change the theme dynamically.

This demonstrates how contexts can be used to make it easy to change the theme dynamically, without having to pass the theme information as arguments down the widget tree.

What is ancestorWidgetOfExactType?

ancestorWidgetOfExactType is a method in Flutter's BuildContext class that returns the nearest ancestor widget of a specified type. It takes a single argument, which is the type of the ancestor widget that you want to find.
This method is useful when you want to access a widget that is higher up in the widget tree, but you don't want to pass it down as an argument to all of the intermediate widgets. Instead, you can use ancestorWidgetOfExactType to find the nearest ancestor of a specific type and then use that widget to access the data or call methods on it.

In the previous example we are using this to find ThemeChanger widget.

How to use get_it package in flutter

Shan — Tue, 31 Jan 2023 13:52:49 +0000

The get_it package is a service locator for Dart and Flutter applications. It allows you to register and retrieve objects (services) throughout your app, making it easy to manage dependencies and decouple different parts of your code.

Here's an example of how to use get_it in a Flutter app:
First, add the get_it package to your pubspec.yaml file:

dependencies:
  get_it: ^7.2.0

Next, import get_it in the file where you'll be using it:

Create a new file called locator.dart. In this you can register all your dependencies and we can call setupLocator inside the main.dart.

import 'package:get_it/get_it.dart';
final locator = GetIt.I;
void setupLocator() {
  locator.registerSingleton<UserService>(() => UserService());
}

Reason why i named it as locator is because it provides a centralized location (or "locator") for managing service locators and dependency injection in a Flutter application.

In main.dart call setupLocator. This will register the services with get_it.

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

To register a service, use the registerSingleton() or registerLazySingleton() method on the GetIt instance. For example, to register a UserService:

Import locator.dart file and you can access the get_it instance to register the services.

locator.registerSingleton<UserService>(()=>UserService());

To retrieve a service, use the get() method on the GetIt instance. For example, to get the UserService:

UserService userService = locator<UserService>();

Note: In case of Lazy Singleton, the service will not be instantiated until it is requested for the first time, which is useful for services that are expensive to construct.

That's a basic example of how to use get_it in a Flutter app. You can also use the package to register and retrieve factory functions, non-singleton objects, and more. For more advanced usage, refer to the package's documentation.

What are singletons?

A singleton is a design pattern that ensures that a class has only one instance, while providing a global access point to that instance. This means that any time the singleton class is called, the same instance of the class is returned.

The singleton pattern is often used when a single instance of a class needs to coordinate actions across the system. For example, a logging service, or a configuration manager, would be good candidates for the singleton pattern.

In Dart and Flutter, you can implement a singleton by making the constructor private, and exposing a static instance getter method. However, the get_it package provides a more convenient way to implement singletons by registering and retrieving singletons via its API.

What are factory instances?

A factory instance is a way to create an object in a consistent way, without specifying the exact type of the object that will be created. This is done by defining a factory method, which is a function that creates and returns an object, typically based on some input.

A factory method is different from a constructor in that it doesn't have to create a new instance of the class every time it's called. Instead, it can return the same instance multiple times, or return a new instance based on some logic.

In Dart and Flutter, you can create factory instances by defining a static factory method on a class or by using get_it package's registerFactory method.

Here's an example of how to create factory instance using get_it package:

getIt.registerFactory<MyService>(() => MyService());

With this factory, every time you call getIt.get() it will call the factory function and return a new instance of MyService.

Factory instances can be useful in cases where you want to return a new instance of a class based on some condition, or where you want to return a different implementation of an interface depending on the context.