In this video, I will show you the Zakat Screen built using Flutter, which helps users understand and calculate their zakat easily through a clean, simple, and modern user interface. The screen is designed for Muslim users who want to fulfill their religious obligation of zakat in an easier and more organized way. At the top, there is a welcoming header that displays “Zakat Calculator” along with a small description about the importance of zakat in Islam. Below that, the screen contains a form where users can input their total wealth, savings, gold, silver, and other assets. The app then automatically calculates how much zakat they need to pay — usually 2.5% of their total savings — using clear and accurate formulas.
The UI design of the Zakat Screen follows a minimalist and spiritual style. It uses calm color tones, rounded cards, and clean typography to create a peaceful experience. Each section, such as wealth input, calculation result, and zakat info, is placed neatly with proper spacing so the layout feels balanced and easy to read. I used Flutter’s TextField widgets for user input and ElevatedButton for the calculate action. The result area shows the total zakat amount in a highlighted container, making it instantly visible to users.
From a technical side, the app uses simple state management with setState() to update the calculation results instantly when the user enters or changes any value. For better usability, there’s also input validation that prevents empty or invalid numbers. The layout is responsive, adapting smoothly across different screen sizes — whether used on a small phone or large tablet. I also added smooth animations and transitions for button taps and result displays to enhance user interaction.
The Zakat Screen also includes an information section explaining what zakat is, why it is important, and how it helps the community by supporting those in need. This makes the screen not only a calculator but also an educational feature that promotes awareness and understanding. Overall, this project shows how Flutter can be used to build meaningful Islamic apps that combine modern technology with spiritual values.