my_application_genesis - GitLite

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

my_application_genesis

★ 15 Open GitHub ↗

This flutter project is designed as a base application with dark-light mode toggle, ability to adjust application colors, responsive layouts, material design, and the ability to choose language for the application, helping developers create new applications quickly and efficiently.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# My Application Genesis
Welcome to our Flutter project! This project is designed as a base application, helping developers create new applications quickly and efficiently.

This application is an extension of the source code from the Material 3 Demo application. You can find the original source code at the link below:

https://github.com/flutter/samples/tree/main/material_3_demo

## Features
* Adaptive Layout

The application includes many basic components (Drawer, NavigationRail, Navigation Bar, Application Bar…) that make navigation and use of the application easier.

The application is designed to display with three different screen sizes, small screens like on mobile phones, medium screens like tablets, and large screens like on laptops, desktops, and external monitors.

Based on the fact that NavigationRail is not recommended on a small screen, the app changes its layout based on the screen width. If it's played on iOS or Android devices which have a narrow screen, a Navigation Bar will show at the bottom and will be used to navigate. But if it's played as a desktop or a web app, a Navigation Rail will show on the left side and at the same time, a Navigation Bar will show as an example but will not have any functionality.

Users can see both layouts on one device by running a desktop app and adjusting the screen width.

* Users can switch between a light or dark theme.
* A pop-up menu is available for users to change the base color used for the light and dark themes. This utilizes a new color seed feature to generate entire color schemes from a single color.
* Users can switch between Material 2 and Material 3 for the displayed components
* The application can be multilingual.
* The above settings can be saved for future application launches.

## AppView with narrow screen

<div style="text-align: center">
    <table>
        <tr>
            <td style="text-align: center">
                <a href="./media res/narrow_screen_drawer.jpg">
                    <img src="./media res/narrow_screen_drawer.jpg" width="200"/>
                </a>
            </td>            
            <td style="text-align: center">
                <a href="./media res/narrow_screen1_page1.jpg">
                    <img src="./media res/narrow_screen1_page1.jpg" width="200"/>
                </a>
            </td>
            <td style="text-align: center">
                <a href="./media res/narrow_screen_material_design_components.jpg">
                    <img src="./media res/narrow_screen_material_design_components.jpg" width="200" />
                </a>
            </td>
        </tr>
        <tr>
            <td style="text-align: center">
                <a href="./media res/narrow_screen_settings.jpg">
                    <img src="./media res/narrow_screen_settings.jpg" width="200"/>
                </a>
            </td>            
            <td style="text-align: center">
                <a href="./media res/narrow_screen_about_us.jpg">
                    <img src="./media res/narrow_screen_about_us.jpg" width="200"/>
                </a>
            </td>
        </tr>
    </table>
</div>

## AppView with medium screen

<div style="text-align: center">
    <table>
        <tr>
            <td style="text-align: center">
                <a href="./media res/medium_screen_drawer.jpg">
                    <img src="./media res/medium_screen_drawer.jpg" width="300"/>
                </a>
            </td>            
            <td style="text-align: center">
                <a href="./media res/medium_screen1_page1.jpg">
                    <img src="./media res/medium_screen1_page1.jpg" width="300"/>
                </a>
            </td>
        </tr>
        <tr>
            <td style="text-align: center">
                <a href="./media res/medium_screen_material_design_components.jpg">
                    <img src="./media res/medium_screen_material_design_components.jpg" width="300" />
                </a>
            </td>
            <td style="text-align: center">
                <a href="./media res/medium_screen_settings.jpg">
                    <img src="./media res/medium_screen_settings.jpg" width="300"/>
                </a>
            </td>            
        </tr>
        <tr>
            <td style="text-align: center">
                <a href="./media res/medium_screen_about_us.jpg">
                    <img src="./media res/medium_screen_about_us.jpg" width="300"/>
                </a>
            </td>
        </tr>
    </table>
</div>

## AppView with large screen

<div style="text-align: center">
    <table>
        <tr>
            <td style="text-align: center">
                <a href="./media res/large_screen_drawer.jpg">
                    <img src="./media res/large_screen_drawer.jpg" width="300"/>
                </a>
            </td>            
            <td style="text-align: center">
                <a href="./media res/large_screen1_page1.jpg">
                    <img src="./media res/large_screen1_page1.jpg" width="300"/>
                </a>
            </td>
        </tr>
        <tr>
            <td style="text-align: center">
                <a href="./media res/large_screen_material_design_components.jpg">
                    <img src="./media res/large_screen_material_design_components.jpg" width="300" />
                </a>
            </td>
            <td style="text-align: center">
                <a href="./media res/large_screen_settings.jpg">
                    <img src="./media res/large_screen_settings.jpg" width="300"/>
                </a>
            </td>            
        </tr>
        <tr>
            <td style="text-align: center">
                <a href="./media res/large_screen_about_us.jpg">
                    <img src="./media res/large_screen_about_us.jpg" width="300"/>
                </a>
            </td>
        </tr>
    </table>
</div>

### Support us
I hope this project can somewhat help you quickly develop your applications. I wish you success in your application development!

If my project has been helpful to you, please give my project a star rating. I would be very grateful if you could treat me to a cup of coffee and snacks. Thank you very much!

[<img src="./media res/paypal.jpg"
alt="Get it on Google Play" 
height="40">](https://www.paypal.me/dienvu1008)

<img src="./media res/techcombank.jpg" height="200" alt="My Time Manager" />

<img src="./media res/momo.jpg" height="200" alt="My Time Manager" />