Background Mask And Background Pattern For Divi

Background Mask And Background Pattern For Divi

Background Mask And Background Pattern For Divi
Published At By Hupen Pun

Divi is the most popular visual drag and drop website builder for WordPress. It is developed and maintained by Elegant Themes. With Divi, you can build beautiful, powerful, and eye-catching websites. With the version of 4.15.0 Divi has brought the most powerful features like Background Pattern and Background Mask. These two brand new design settings allow you to create a vast array of new visual effects by combining colors, images, gradients, masks, and patterns using a simple new interface.

Background Mask

Background masks use positive and negative space to frame backgrounds and create new shapes. Background masks are placed on top of your background elements and below your content, and they work with background gradients, images, videos, and parallax images too. Masks are built using SVGs, so they are super crisp, lightweight, and will automatically conform to the size of your elements. There are more than 20 builtin background masks you can choose from.

Background Pattern

Background patterns are placed on top of your background element below your content, that emphasize your content and design. There are more than 20 builtin background patterns you can choose from.

But what if you want to upload your own SVG design patterns and masks? Well, you can not upload your custom designs yet. I hope we can have that too in later releases of Divi Theme.

For More Information:

Hupen Pun

Hupen Pun

Hi There, I am Hupen Pun. I enjoy Teaching Mathematics/Science, Trekking Guiding in Himalayas, Developing Web Applications.
New Teaching License Syllabus For Secondary And Lower Secondary Levels: TSC

New Teaching License Syllabus For Secondary And Lower Secondary Levels: TSC

New Teaching License Syllabus For Secondary And Lower Secondary Levels: TSC
Published At By Hupen Pun

The Teachers Service Commission (TSC) [Ne: शिक्षक सेवा आयोग ] has published a new syllabus for Teaching License for the Secondary (Ma. Bi.) and Lower Secondary Level(Ni. Ma. Bi.). The chairman desk was vacant for so long time so, there were no new improvements over TSC. But, now the new chairman Mr. Madhu Prashad Regmi has been in the position of chairman.

This course is designed for those who want to become teachers at different levels. The curriculum has been developed for the purpose of conducting a teaching permit examination for those who wish to integrate themselves into the state of school education and teaching-learning system in Nepal before entering the teaching service.

Get the Syllabus:

1. Secondary Level (Ma. Bi. / मा. बि.) Teaching   License Syllabus

2. Secondary Level (Ma. Bi. / मा. बि.) Teaching   License Syllabus

For More Information:

Hupen Pun

Hupen Pun

Hi There, I am Hupen Pun. I enjoy Teaching Mathematics/Science, Trekking Guiding in Himalayas, Developing Web Applications.
A Quick Guide to ListView In Flutter – Hupen Design

A Quick Guide to ListView In Flutter – Hupen Design

A Quick Guide to ListView In Flutter – Hupen Design
Published At By Hupen Pun

Flutter is an open source Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter is fast in the development process, can give native performance and can have flexible and adoptable ui components. Here, in this blog we are going to look at ListView widget in detail.

“ListView Widget comes in when you are to show a list of scrolling items on your application.”

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView. This ListView widget will be so helpful when you are to show different widgets in a scrollable list. The list can either be in vertical or horizontal direction. All you need to do is play with some words inside the ListView widget.

There are four options for constructing a ListView: (Here, we will cover only the first three methods.)

  • The default constructor takes an explicit List<Widget> of children. This constructor is appropriate for list views with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible.
  • The ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible. If you have long lists of items or you are creating a list dynamically, you can use this version of ListView Widget. 
  • The ListView.separated constructor takes two IndexedWidgetBuilders: itemBuilder builds child items on demand, and separatorBuilder similarly builds separator children which appear in between the child items. This constructor is appropriate for list views with a fixed number of children. This version is just the same as ListView.builder but it adds white space between each list item with the Divider widget. 
  • The ListView.custom constructor takes a SliverChildDelegate, which provides the ability to customize additional aspects of the child model. For example, a SliverChildDelegate can control the algorithm used to estimate the size of children that are not actually visible.

Let’s dive into code.

1. ListView

– It takes a children attribute with a list of items for the ListView. And those items will be widgets. Here, I have three ListTile widgets.

        ListView(
          children: [
            ListTile(
              leading: Icon(Icons.arrow_right),
              title: Text("January"),
            ),
            ListTile(
              leading: Icon(Icons.arrow_right),
              title: Text("February"),
            ),
            ListTile(
              leading: Icon(Icons.arrow_right),
              title: Text("March"),
            ),
         ),
         ],

Output Looks like This:

2. ListView.builder

– It will have an itemCount attribute, which tells ListView how many items will be in the ListView. Additionally, it will have an itemBuilder function with BuildContext and iterator and returns a Widget. Here, the itemBuilder is returning a ListTile widget.

            List months = ['January', 'February', 'March', 'April', 'May'];
                        
            ListView.builder(
              itemCount: months.length,
              itemBuilder: (BuildContext context, index) {
                return ListTile(
                  leading: Icon(Icons.arrow_right),
                  title: Text(months[index]),
                );
              },
            ),

Output Looks like This:

3. ListView.separated

-It is very similar to the ListView.builder but it will insert some widget like Divider (in this example) as a separator between each of the items. The separating widget will be in the separatorBuilder function.

            List months = ['January', 'February', 'March', 'April', 'May'];
                        
            ListView.separated(         
              itemCount: months.length,
              separatorBuilder: (BuildContext context, int index) =>
                  const Divider(
                color: Colors.blue,
              ),
              itemBuilder: (BuildContext context, index) {
                return ListTile(
                  leading: Icon(Icons.arrow_right),
                  title: Text(months[index]),
                );
              },
            ),

Output Looks like This:

Let’s have more control over the ListView widget.

  • You can make your List scroll vertical or horizontal with the following command.
  • scrollDirection: Axis.horizontal,
    scrollDirection: Axit.vertical,
  • If you want to just reverse your list.
  • reverse: true,
  • If you want to adjust physics on your list.
  • physics: NeverScrollableScrollPhysics(), 
  • If you want to keep the list items alive when they are off screen.
  • addAutomaticKeepAlives: false,

    You can have in detail information on the ListView widget in this official Flutter Widget Of The Week from Google Flutter Team.

    Hupen Pun

    Hupen Pun

    Hi There, I am Hupen Pun. I enjoy Teaching Mathematics/Science, Trekking Guiding in Himalayas, Developing Web Applications.
    Five useful flutter commands – Flutter development

    Five useful flutter commands – Flutter development

    Five useful flutter commands – Flutter development
    Published At By Hupen Pun

    Flutter is an open source Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter is fast in the development process, can give native performance and can have flexible and adoptable ui components.

    Flutter was first released in 2017 and since then it’s getting huge popularity and adaptation in mobile development communities. The best part of flutter is you can build apps for different variants with a single codebase that means you don’t have to write a single application in different codebases. Now, with the stable release of version 2.13 flutter is now supporting a web feature that will enable you to have a website with the same code. Hence, you can have mobile apps and web apps with a single codebase. 

    Enough talking on background, let’s focus on the main topic, i.e. useful flutter commands in flutter development. Here in this blog I have included five flutter commands with a detailed description.

    1. Flutter emulators

    This command helps you show the emulators you had created on your device. It will show the device name with its unique id through which you can access your emulator.

    flutter emulators
    

    2. Flutter emulators –launch

    This command is very helpful and saves a lot of time. Basically, this command helps you launch an emulator right from your command prompt. Here, –launch flag with the emulator id that you had in the previous command will launch the emulator.

    flutter emulators --launch 'emulator_id'
    

    3. Flutter clean

    This is one of my favourite commands in flutter. If you need to delete a previously built/compiled app, it will help you out like a magic snap.

    flutter clean
    

    4. Flutter run

    Flutter run command helps you build your app and run on a connected device. This command first fetches dependencies with flutter pub get command, builds/compiles and then runs on the connected device.

    flutter run
    

    5. Flutter doctor

    This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform. For example, android studio is installed or not, which flutter version you are currently using on, android SDK installed or not etc.

    flutter doctor
    

    There are other tons of commands though. I have included some here.

    flutter create 'project_name'
    
    flutter pub get
    
    flutter pub add 'package_name'
    
    flutter build appbundle / flutter build apk
    

    Flutter development is so interesting, easy and fast. I was previously used to developing apps using android studio and Java, but when flutter was first released, it started switching to flutter and now I have all my apps with flutter. Thank you for reading my blog.

    Hupen Pun

    Hupen Pun

    Hi There, I am Hupen Pun. I enjoy Teaching Mathematics/Science, Trekking Guiding in Himalayas, Developing Web Applications.
    Five Websites To Find Freelance Jobs in 2021 For Web Developers

    Five Websites To Find Freelance Jobs in 2021 For Web Developers

    Five Websites To Find Freelance Jobs in 2021 For Web Developers
    Published At By Hupen Pun

    Freelancing is now getting so popular these days.. The work culture is changing so rapidly that people are finding new ways and boost efficiency and productivity. Freelancers are self-employed and often referred to as independent contractors. They are hired by a company on a short or long-term basis, but not as permanent company employees. For example, If an X company needs a photographer, they hire a freelance photographer. The photographer takes photos as instructed and gets payment, done. Normally,

    There so many freelancing areas, but here in this blog, I am mainly focusing particularly on web development. So, here I have listed the top 5 best freelancing websites for web designers, web developers. But, on saying that,  these websites are not only for web development, you can check them for all sorts of freelancing jobs.  

    Upwork may be one of the best freelance websites for finding work no matter what type of freelancer you are. Those in web development, graphics design, customer support, and even freelance writing will find that Upwork has much to offer. From small businesses to huge corporations, many different types of companies are looking to hire bloggers, web designers, and freelance writers through Upwork.

    Designhill gives employers looking for freelance designers a few ways to find them. Designhill has a lot of offers whether you are a graphic designer, web designer, or pursuing other types of design.

    Toptal pitchers themselves as a place to find the top 3% of freelance talent. Their screening process is so rigorous that out of the thousands of submissions they get every month they only accept a few into their ranks. This exclusively sets them apart from so many other freelance websites out there.

    Let’s not forget LinkedIn job postings – finding remote part-time or full-time work maybe just a few searches away. There’s a reason why LinkedIn is one of the best job sites: they continue to deliver what job seekers are looking for.

    We work remotely boasts that they get around 2.5 million users a month. That’s huge. They have a multitude of job posting with many design-related offerings. Whether you’re looking for part-time work or freelance jobs that will keep you busy full time, we work remotely has freelance jobs to fit your skillset.

    There are other popular freelancing websites as well. They are listed below.

    Hupen Pun

    Hupen Pun

    Hi There, I am Hupen Pun. I enjoy Teaching Mathematics/Science, Trekking Guiding in Himalayas, Developing Web Applications.