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_webpage
Video: https://youtu.be/I75RalITPYA
In this blog, we are going to make an Appwrite Website element:
In this whole project, I am going to follow MVC architecture
Let'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.
import 'package:flutter/material.dart';
import '../constants/dimes.dart';
class CommonButton extends StatefulWidget {
final String text;
final double height;
final double width;
const CommonButton({super.key, required this.text,required this.height,required this.width});
@override
State<CommonButton> createState() => _CommonButtonState();
}
class _CommonButtonState extends State<CommonButton> {
@override
Widget build(BuildContext context) {
return Container(
height: widget.height,
width: widget.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: const Color(0xFFc7d8eb)),
alignment: Alignment.center,
child: Text(
widget.text,
style: TextStyle(
color: const Color(0xFF171d37), fontSize: Dimensions.scaleH(15)),
),
);
}
}
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:
import 'package:appwrite_web/feature/home/template/navbar_template.dart';
import 'package:flutter/material.dart';
import 'appwrite_template.dart';
class HomeTemplate extends StatefulWidget {
const HomeTemplate({super.key});
@override
State<HomeTemplate> createState() => _HomeTemplateState();
}
class _HomeTemplateState extends State<HomeTemplate> {
@override
Widget build(BuildContext context) {
return const Column(
children: [
NavbarContainer(),
// This new Template is added here (Appwrite Template)
AppwriteTemplate(),
],
);
}
}
Now let's dive into our AppwriteTemplate() class which has the file name of appwrite_template.dart :
import 'package:appwrite_web/common_widgets/button.dart';
import 'package:appwrite_web/constants/colors.dart';
import 'package:flutter/material.dart';
import '../../../constants/dimes.dart';
class AppwriteTemplate extends StatefulWidget {
const AppwriteTemplate({super.key});
@override
State<AppwriteTemplate> createState() => _AppwriteTemplateState();
}
class _AppwriteTemplateState extends State<AppwriteTemplate> {
final double _fontPadding = 68;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
top: Dimensions.scaleH(60),
),
child: Column(
children: [
MouseRegion(
cursor: SystemMouseCursors.click,
child: Container(
width: Dimensions.scaleW(35),
decoration: BoxDecoration(
color: const Color(0xFF34b86d),
borderRadius: BorderRadius.circular(15),
),
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
'Appwrite 1.4 is here!',
style: TextStyle(
color: Colors.white, fontSize: Dimensions.scaleH(13)),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: Dimensions.scaleH(15)),
child: MouseRegion(
cursor: SystemMouseCursors.text,
child: Text(
"Build Fast. Scale Big. All in One Place.",
style: TextStyle(
color: AppColor.fontColor,
fontWeight: FontWeight.bold,
fontSize: Dimensions.scaleH(40),
),
),
),
),
Padding(
padding: EdgeInsets.only(
top: Dimensions.scaleH(15),
left: Dimensions.scaleW(_fontPadding),
right: Dimensions.scaleW(_fontPadding)),
child: MouseRegion(
cursor: SystemMouseCursors.text,
child: Text(
"Appwrite is a backend platform for developing Web, Mobile, and Flutter applications. Built with the open source community and optimized for developer experience in the coding languages you love.",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColor.fontColor,
fontSize: Dimensions.scaleH(15),
),
),
),
),
MouseRegion(
cursor: SystemMouseCursors.click,
child: Padding(
padding: EdgeInsets.only(top: Dimensions.scaleH(30)),
child: CommonButton(
text: "Get Started",
height: Dimensions.scaleH(50),
width: Dimensions.scaleW(33),
),
),
)
],
),
);
}
}
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 GitHub
Top comments (0)