Posted on Sep 28 • Originally published at raman04.hashnode.dev This blog is very long to read, I have summarized every bit made the video of it, and have provided all the code on GitHub, check them out:GitHub: https://github.com/raman04-byte/appwrite_webpageVideo: https://youtu.be/I75RalITPYAIn this blog, we are going to make an Appwrite Website element:In this whole project, I am going to follow MVC architectureLet's dive into code, I would like you to read my before blog where I have given the folder structure and the base of the application, let's look at the code that will help us make this:I have added button.dart file so that we can import this file and use this again and again without writing the code repeatedly.This code defines a CommonButton Widget that represents a button with customizable text, height, and width. Here's an explanation of the code:CommonButton is a StatefulWidget that requires three parameters:text: The text to be displayed on the button.height: The height of the button.width: The width of the button._CommonButtonState manages the state of the widget.In the build method:A Container widget is used to create the button. It has a height and width determined by the widget.height and widget.width parameters.The button has a circular border-radius, giving it a rounded appearance, and a background color specified as const Color(0xFFc7d8eb).The content of the button is centered using the alignment property.Inside the container, a Text widget displays the widget.text. The text is styled with a specific color (const Color(0xFF171d37)) and font size, which is calculated based on the Dimensions.scaleH(15) value.Overall, this code creates a reusable CommonButton widget that allows you to create buttons with customizable text, height, and width. The appearance of the button can be adjusted using the provided parameters.Here is the updation in home_template.dart file:Now let's dive into our AppwriteTemplate() class which has the file name of appwrite_template.dart :Let's go into detail about the AppwriteTemplate code:AppwriteTemplate Widget:This widget is intended to represent a template for displaying information about Appwrite, which is a backend platform, along with a call-to-action button._AppwriteTemplateState Class:This class manages the internal state of the AppwriteTemplate widget.Padding Widget (Top Spacing):The top-level Padding widget adds vertical spacing to the content within the template. It is used Dimensions.scaleH(60) to determine the top padding, making it responsive based on screen size.Column Widget:Inside the Padding, there is a Column widget that organizes the content vertically.Green Banner:A MouseRegion widget is used to detect mouse click events on a green-colored container. It displays the text "Appwrite 1.4 is here!" in white. This is likely an informational banner or announcement.The banner has a green background color (Color(0xFF34b86d)) and rounded corners due to BorderRadius.circular(15).The text is centered within the container and styled with a white color and a font size based on Dimensions.scaleH(13).Headline:Below the green banner, there's another MouseRegion containing a headline that reads "Build Fast. Scale Big. All in One Place."This text is styled with a larger font size, a bold font weight, and a specific color.Description:Following the headline, there's a MouseRegion contains a paragraph of text that describes Appwrite as a backend platform.The text is centered within the region and styled with smaller font size."Get Started" Button:At the bottom of the Column, there's a MouseRegion contains a call-to-action button labeled "Get Started."This button is created using the CommonButton widget.The button's appearance can be customized with parameters like text, height, and width.Overall, this AppwriteTemplate provides a structured layout for presenting information about Appwrite, including a banner, headline, description, and a button to encourage users to get started. The design and responsiveness of the template can be adjusted using the provided parameters and styles.This is what we have created till now by comparing both the Appwrite website and our webpage in Flutter WebView:Appwrite Website:Flutter WebView:There is always a scope for improvement and I am trying my best to make this WebView pixel perfect, hence if you want to contribute, You are most Welcome to my GitHubTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Francisco Inoque - Sep 25 Jonathan Gamble - Sep 25 Chris Cook - Sep 25 Bobur Umurzokov - Sep 25 Once suspended, raman04byte will not be able to comment or publish posts until their suspension is removed. Once unsuspended, raman04byte will be able to comment and publish posts again. Once unpublished, all posts by raman04byte will become hidden and only accessible to themselves. If raman04byte is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to raman04-byte. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag raman04byte: raman04byte consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging raman04byte will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.