How to build your Flutter news app without coding in 10 minutes, using Nowa.
Building a news app, or blog app, or any app that has the purpose of displaying information from the web is something very common. A very important aspect when building such an app is to have a nice-looking UI, But usually this is not the case when you use existing no-code tools that strict your UI building to the templates and tools that are offered.
What if I told you that you can create a stunning news app without writing code and with the freedom to make it looks exactly like you wish! Let me show you how to do it with a new platform called “Nowa”.
If you are a video type of person, check out our YouTube tutorial at the end of the article!
Nowa is a new platform that let’s you create flutter apps fast and without the need to write a single line of code. Still you can access the source code of your app and modify it if you want, which gives you full control of how to build every part in your app. In this article we will see how easy it is to create a full highly customizable news app from scratch using Nowa.
First, let’s start by designing the UI of our application. In Nowa you can easily add and customize screens with the dedicated tool. To design a simple appbar you can use the container tool, and drag and drop from your PC icons and fonts to make it look exactly as you want.
The same tools can be used to design other parts of the UI, like the cards that will hold the news title, image and description. Since the card will be duplicated multiple times, Nowa gives you the ability to create components: to create one just select the elements of your card, group them and then turn them into a component and give it a name.
In our app, every card will show a different news, to do that we have to connect every element (like image and title) of the component to a variable. To do so, simply select the element from the outline, and then from the details panel we can decide what properties to connect to variable by clicking on the dot next to the name of the property.
The second screen of your app will show one of the news, so let’s design a UI that will show the image and the text of the article. Let’s also add some icons for the navigation.
Let’s add also a third screen that shows some information about your app, and maybe yourself!
Now that we are satisfied with the look of the UI we can start connecting data to the application. To do so, we have to go to the data panel by clicking on the dedicated icon on the bottom left.
Here we can create an API request by clicking on the “add” button. You can now paste the URL of your data source, then you can click on “test” to check how your data looks like.
When you are satisfied with the schema of your data, you can go back to the designer board.
The next step is to select the cards and group them together, then turn the group into a row to make the news line up horizontally. Now, from the widget panel we drag and drop the “data” widget inside the screen. From the outline we can now drag and drop the row inside the data widget, and from the details panel we can change the source: in this case we select the API we created previously.
Now we select the row from the outline and from the children property we select the list of news we got from our data.
Again from the outline we select the card, and from the details panel we can connect every variable we created previously with the data. Our data is now shown on the screen.
Now we want to click in one of the cards and show its content in the second screen.
The first step is to create variables for the elements in the screen that will change based on the news (like the image and the text). Now we select the card and add a GestureDetector wrapper from the details panel, we click “on tap” and we can now play with the visual programming.
Here we can select the screen we want to navigate to, and connect to every variable of the screen with the data. With the same steps we can add navigation also on the icons.
You can preview your application by clicking on the play button.
Easy right?
Congrats! now you have your OWN news app, which you can download its source code and export it to any device with no watermark for FREE!
