Introduction In recent weeks I ventured into the world of no-code and low-code development. If you ask me, I’d say there are some pretty impressive tools out there, including Bubble and Flutterflow. I was particularly digging into FlutterFlow while using it to build some client products. FlutterFlow is a rather versatile tool that is being improved daily because that’s how fast they roll out updates. Today though I will be talking about UI building in FlutterFlow on specific form factors. So FlutterFlow allows you to build for three form factors which is the mobile, tablet and desktop/laptop but each form factor laptops for instance come in different sizes some being bigger than others and your designs need to be able to adapt and remain consistent on all the laptop sizes. The Layout Therefore for context, we will be talking about the laptop form factor. When starting a design FlutterFlow allows you to choose a screen size which is more or less an aspect ratio at the top of the page. The first thing that you would do would be to select the screen size (resolution) 1920 by 1080 (width to height) which translates to the 16:9 aspect ratio that is preferred by 77% of computer users according to a post on wikipedia. This implies that you would be designing for by far the majority of users. After this, it is always a good idea to begin every component (a group of widgets within a confined space i.e. text, buttons, sections, pages) of your design with a container widget this is because the container enables a high level of customizability and it is the best widget to determine the length and width of sections, rows, columns and widgets within your UI. So to start your design clear out any default widgets and add a container as the first widget on the widget tree. Set this container to occupy 100% width and length. The dimensions of widgets can either be set in pixels or percentages, in certain use cases pixels may be better but generally working with percentages provides more dynamic control of the dimensions. Setting the dimensions to 100% means that that widget will occupy 100% of the screen available therefore taking away the need to do exhausting calculations about the pixels each widget occupies on the screen. You can follow this container with a row or a column depending on your layout. Rows and columns are the most basic layout widgets and do exactly what you think they do arranging items horizontally or vertically. They do not take any dimensions of their own but occupy the space of the widget in which they are placed depending on certain constraints that you set for them which is an entirely different topic for discussion. Consider we have a row containing two sections that are adjacent to one another. First of all, we need to fix the height of the row by wrapping it in a container and setting the container’s height to 20% for instance and its width to 100% so that the row can occupy the entire run along the width. Within the row add to containers and set their dimensions to 100% each because they are constrained by the height of the row. Next, we have to provide them with an expansion setting “Expanded” in this case which makes the widget fill the available space in its parent widget and give it a flex value which works like the weight of that widget within the main axis of the parent widget. So the flex value is more like a ratio like in the image below, I gave the yellow container a flex value of 2 and the teal one a default value of 1. The next step would be to take care of the spacing, now it’s not good practice to have a bunch of padding values on every widget. Generally, when applying paddings it is best to everything at the topmost level i.e. starting with the parent elements in this case the parent element would be the row. The row provides functionalities that allow for the spacing of its children as well as start and end spacing. At the bottom of the row properties section, you can set this value. The value is generally in pixels, there’s an option to apply different values to start and end by switching the toggle off. Conclusion Ultimately, the success of UI building in FlutterFlow for laptops lies in the ability to balance precision and adaptability, creating interfaces that not only meet the preferences of the majority but also seamlessly adjust to the diverse array of laptop screen sizes. This strategic approach enhances user experiences and positions FlutterFlow as a dynamic tool for responsive design in the ever-expanding landscape of digital platforms, happy building FlutterFlow devs 💯 ✌ ️.

In this short tutorial am going to show you how to connect flutterwave api to your Django application to be able to collect mobile money payments, for Uganda. But for other countries the procedure varies. First you will install the flutter wave python package , I will assume you have python and Django installed. If you are using python only, not with Django the logic in this tutorial should be easy to follow. Add this view to your views.py, The explanation is below. The code above is a view function that connects to a form in the frontend, where the user has to type their details for payment, that is the mobile number, email and the amount they want to pay. When a post request is initiated some checks are done and the user is redirected to the link sent to by flutterwave for verification, it is found in res[‘link’]. Once you get this link you have to redirect the user to it, so that they can enter the OTP sent to their number. The rest you can see from the code. This “redirect_url”: “http://127.0.0.1:8000/webhook”, has to be designed as a webhook, for those who don’t know what a webhook is, It is in simple terms an endpoint where information is sent to. In this context it is the end point where the information about the success of the transaction is sent to, so that you do something with it, like allow the user to access the service you are charging them for. Now you have to design the webhook function , and don’t forget to register the view in the urls.py file in Django directory And that is it you can be able to access mobile money payments. DONT FORGET

Hello, I would like to share with you a great journey on how to build a website using WordPress. Word Press WordPress is a popular and widely-used platform for website-building. It is an open-source, where by it’s freely available, and you can use it anytime, any where.  It is also a versatile tool used for building various types of websites like Business websites, E-commerce websites, Educational websites, Port Folio, News and Magazine Websites, Social media websites etc.  Importance of WordPress in website development  Introduction to the WordPress Dashboard Word Press dash board has elements like posts, media, pages, Themes, Plugins etc where by each element is very important when starting to build your website  Choosing Suitable Themes and Plugins For your Website  You select a suitable theme and plugin for the website you are going to build and install it. But before installing the Plugin you have chosen, you have to first check and see if the plugin you have installed will be suitable for the website you are building.  The plugin chosen should be suitable for the website you are going to build to avoid your website from crushing, if the plugin chosen is not perfect with the website, it may lead to the crushing of your website  Building a Website When starting to build a website, you can start from scratch (from the start) or you can choose to use a template which of your choice. If you decide to start from the start, go to pages, click on Add new page, where it will ask you to write the title of your page and after you have given it, then you can can publish your page and it becomes live to be used.  And if you decide to choose not to start from scratch, you can choose a template of your choice and import it to your site so that you can start building your website  Conclusion  When editing your website, the perfect plugin you can use is elementor because it helps you to edit the unnecessary content so that you can put the content you want.  Whether you are a blogger, business owner, or developer, WordPress provides a flexible solution for creating and managing websites of all kinds.  Join us today in the world of WordPress to help you build your website for the better advertisement of your Business