Flutter POS App UI

The core logic and UI are contained within the lib/ directory:

• main.dart: Serves as the application entry point and handles main navigation.
• home.dart: Contains the primary home page, including the product grid and the order management interface.

lib/
├── main.dart          # App entry point and main navigation
└── home.dart          # Home page with product grid and order management

To set up the project locally, ensure you have the Flutter SDK installed and follow these steps:

1. Clone the repository.
2. Navigate into the project directory.
3. Fetch the required dependencies using flutter pub get.
4. Launch the application using flutter run.

git clone https://github.com/yourusername/flutter-pos-app-ui.git
cd flutter-pos-app-ui
flutter pub get
flutter run

Before running the project, ensure your environment meets the following requirements:

• Flutter SDK: Version ^2.17.6 (specifically >=2.17.6 <3.0.0).
• Code Editor: VS Code, Android Studio, or any compatible editor.
• Knowledge: Basic understanding of Flutter and Dart.

The MainPage widget manages the primary application layout and navigation state. It uses a Row containing a side menu and an expanded content area. Navigation is handled internally via the pageActive state variable and the _setPage(String page) method.

Supported navigation targets (keys) are:

• Home: Renders HomePage.
• Menu: Renders an empty Container.
• History: Renders an empty Container.
• Promos: Renders an empty Container.
• Settings: Renders an empty Container.

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

// Internal state management logic:
// _setPage(String page) updates the active view.
// _pageView() returns the widget corresponding to the active page.

The application icon for the Windows runner is defined using the IDI_APP_ICON identifier. To change the icon displayed in Windows Explorer and the taskbar, replace the file located at resources\app_icon.ico.

IDI_APP_ICON            ICON                    "resources\app_icon.ico"

The application uses a vertical side menu located in a Container with a width of 70. The menu items are constructed using _itemMenu, which accepts a menu name (String) and an icon (IconData). When a menu item is tapped, it triggers _setPage to update the application view. The active menu item is highlighted with a Colors.deepOrangeAccent background.

Widget _itemMenu({
  required String menu,
  required IconData icon,
}) {
  // ... implementation uses GestureDetector to call _setPage(menu)
}

The _topMenu widget is a private helper used to create header sections for both the main product area and the order sidebar. It accepts a title, a subTitle, and an action widget (such as a search bar or a button).

_topMenu(
  title: 'Lorem Restourant',
  subTitle: '20 October 2022',
  action: _search(),
)

The _itemTab widget is a private helper used to create horizontal category filters (e.g., Burger, Noodles, Drinks). It supports an isActive state to visually highlight the selected category using a deepOrangeAccent border.

_itemTab(
  icon: 'icons/icon-burger.png',
  title: 'Burger',
  isActive: true,
)

The _itemOrder widget is a private helper used to render items within the active order list in the sidebar. It displays the product image, title, price, and quantity.

_itemOrder(
  image: 'items/1.png',
  title: 'Orginal Burger',
  qty: '2',
  price: '\$5.99',
)

The application entry point is the main() function which calls runApp(const MyApp()). MyApp is a StatelessWidget that configures the MaterialApp settings, including the application title ('POS Food'), the primary theme color (blue), and sets MainPage as the initial home screen.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'POS Food',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

The HomePage widget is the main application screen for the POS UI. It provides a comprehensive layout including a product grid, category filtering via tabs, a search bar, and an order management sidebar. It is implemented as a StatefulWidget.

import 'package:flutter_pos_app_ui/home.dart'; // Assuming the package name

// Usage in your widget tree
const HomePage()