Responsive Layout Demo

This project is a beginner-friendly Flutter application demonstrating how to build a fully responsive UI that adapts to both mobile and desktop screens. It showcases practical usage of standard Flutter layout widgets including Row, Column, Expanded, Flexible, and LayoutBuilder.

How to Run the App

If you have the Flutter SDK installed on your machine, you can easily run this project using either Visual Studio Code (VS Code) or Android Studio.

Option 1: Running in Visual Studio Code (VS Code)

1. Open the Project: Launch VS Code and go to File > Open Folder... to open this project folder.
2. Install Extensions: Ensure you have the official Flutter and Dart extensions installed from the Extensions Marketplace (Ctrl+Shift+X).
3. Get Dependencies: VS Code should automatically fetch dependencies when you open the project. If not, open the integrated terminal (`Ctrl+``) and run:

   flutter pub get

4. Select a Target Device: Look at the bottom-right corner of the VS Code window (in the status bar). Click on the device name (e.g., "Windows", "Chrome", or an emulator) to select where you want to preview the app.
5. Launch the App:
   • Open lib/main.dart in the editor.
   • Press F5 to start debugging, or click Run > Start Debugging from the top application menu.
   • Alternatively, you can click the visual "Run" (Play) icon located at the top-right corner of the code editor.

Option 2: Running in Android Studio

1. Open the Project: Launch Android Studio and click on Open (or File > Open if already inside a project). Select this project folder.
2. Install Flutter Plugin: Make sure you have the Flutter plugin installed via Settings > Plugins.
3. Get Dependencies:
   • Open the pubspec.yaml file in the project viewer.
   • Click on the "Pub get" prompt that appears in the action ribbon at the top of the editor pane.
4. Select a Target Device: In the main top toolbar, locate the device selection dropdown (next to the green "Play" button). Select a running Android Virtual Device (AVD), Chrome, or a connected physical phone.
   • Tip: If the list is empty, open the "Device Manager" from the toolbar to create a new virtual device.
5. Launch the App:
   • Click the green Play (Run) triangle button in the top toolbar.
   • Alternatively, press Shift+F10 on Windows to run the application.

---

Testing the Layout System

Once you have the app running:

• On Desktop/Web Apps: Try horizontally resizing the app window. You'll notice the UI seamlessly transitions between a classic mobile list view (for narrower screens) and a robust sidebar dashboard view (for screens wider than 600px).
• On Mobile Emulators: The layout will default to the vertical stack, optimizing space on smaller screens!