Flutter most useful and commonly used widgets

Flutter offers a wide range of widgets to help you layout the user interface (UI) of your app. The choice of which widgets to use depends on the specific requirements of your app, but here are some of the most useful and commonly used widgets for UI layout in Flutter:

Container: A versatile widget that can be used to create boxes with backgrounds, padding, margins, and more. It's often used as a parent or wrapper for other widgets.

Row and Column: These widgets are used to create horizontal and vertical layouts, respectively. You can nest them to create more complex layouts.

Expanded: Used inside a Row, Column, or Flex to indicate that a child should take up the available space within the parent widget.

ListView: For creating scrollable lists of widgets, either vertically or horizontally. There are variations like ListView.builder for efficient rendering of large lists.

Stack: Allows you to overlay widgets on top of each other. It's useful for creating complex layouts where widgets overlap.

Card: A material design card that provides a surface to display content. It's often used for displaying information in a structured format.

Padding and Margin: These widgets are used to add space between the child widgets and their parent (Padding) or between child widgets (Margin).

SizedBox: Used to set specific dimensions (width and height) for a widget. It's handy for controlling the size of widgets.

Align: Allows you to position a child widget within its parent according to specific alignment parameters.

Flexible: Similar to Expanded, but it allows you to specify how space should be distributed among multiple children within a Row or Column.

Container Decorations: You can use the BoxDecoration property of a Container to add borders, shadows, and background colors to the widget.

AppBar: A common widget for creating top app bars with titles, actions, and navigation.

BottomNavigationBar: For creating navigation bars at the bottom of the screen, often used for switching between different sections of the app.

TabBar and TabBarView: Used for creating tabbed interfaces where users can switch between different content sections.

TextField and FormField: For accepting user input, with or without a label. FormField is often used with form validation.

Image: To display images in your app. You can load images from the network or assets.

Text: For displaying text, with support for rich formatting and styles.

Icon: To display icons from the Material Icons or other icon sets.

FlatButton, RaisedButton, IconButton: Different types of buttons for user interaction.

Slider, Switch, Checkbox: For capturing user input in the form of sliders, switches, and checkboxes.

These are some of the most commonly used widgets for UI layout in Flutter, but Flutter provides many more widgets for various purposes. Depending on your app's design and functionality, you may need to explore additional widgets and combine them creatively to achieve your desired UI layout.

Flutter app iteration process

Creating a Flutter application (and mobile apps in general, regardless the technology) with UI, business logic, API integration, database, user authentication, and observing clean architecture involves several steps or iterations. Here’s a high-level outline of the project steps:

Iteration 1: Project Setup

Project Initialization: Start by creating a new Flutter project using the Flutter CLI or your preferred IDE.

UI Design: Define the overall user interface (UI) structure, including wireframes and UI design mockups.

Iteration 2: Setting Up the UI

3. UI Implementation: Begin building the UI components using Flutter widgets. Create screens, layouts, and user interface elements as per the design.

Iteration 3: Business Logic

4. Model Classes: Create model classes to represent the data structures and entities used in your application.

Business Logic Layer: Implement the business logic layer, which includes functions and methods to handle data manipulation, validation, and calculations.

Iteration 4: API Integration

6. API Endpoints: Identify the APIs you need for your application. Create API endpoints or use third-party APIs for fetching and sending data.

HTTP Client: Implement an HTTP client (e.g., Dio or http package) to make API requests and handle responses.

Iteration 5: Database

8. Database Setup: Choose a database solution (e.g., SQLite, Firebase Realtime Database, or Firestore). Set up the database and define the schema.

Data Repository: Create a data repository that handles interactions with the database. Implement CRUD operations for your data.

Iteration 6: User Authentication

10. User Authentication Setup: Implement user authentication using Firebase Authentication, Auth0, or another authentication service. Set up user registration, login, and password reset functionality.

Iteration 7: Clean Architecture

11. Architecture Design: Define your application’s architecture. Consider using a clean architecture pattern like Domain-Driven Design (DDD), Clean Architecture, or BLoC.

Separate Layers: Organize your code into separate layers (presentation, domain, data) to maintain separation of concerns.

Dependency Injection: Use a dependency injection framework (e.g., GetIt or Provider) to inject dependencies and manage the flow of data between layers.

Iteration 8: Testing and Debugging

14. Unit Testing: Write unit tests to ensure the correctness of your business logic and data layer.

UI Testing: Perform UI testing to verify that your application’s user interface works as expected.

Iteration 9: User Experience Enhancements

16. Optimize UI: Fine-tune the user interface, improve usability, and address any user feedback or issues.

Iteration 10: Deployment

17. Deployment Setup: Prepare your application for deployment on the desired platforms (iOS, Android, web, etc.).

App Store Submission: If applicable, submit your application to the App Store (e.g., Apple App Store, Google Play Store) or distribute it through other channels.

Iteration 11: Post-Deployment

19. Monitoring and Maintenance: Monitor the application’s performance, handle bug fixes, and provide updates based on user feedback.

Scaling and Enhancements: Consider scaling the application, adding new features, or integrating with additional services based on the project’s requirements and user demands.

Throughout the development process, remember to follow best practices, maintain code quality, and document your codebase effectively. The specific details and complexity of each iteration may vary depending on your project’s scope and requirements.

Happy Carl - final vesion released!

Happy Carl is here!

Keep the dungeon clean of monsters.

Don't get eaten!

Scary monsters! Mighty bosses!

Smash them! Throw stuff! Blow them up!

Get Happy Carl for free now!

https://salamanderlabs.itch.io/happy-carl 

https://play.google.com/store/apps/details?id=com.SalamanderLabs.happydemoncarl

Happy Carl is live!

Smash and beat the monsters up all around the castle.
Pick the rocks and throw them to the monsters.
Or just smash them with your hammer.
Don't get bitten!

Happy Carl is available for free to download and play on Android, Windows, MacOS and Linux

Downloads:
https://salamanderlabs.itch.io/happy-carl

https://play.google.com/store/apps/details?id=com.SalamanderLabs.happydemoncarl

Sprite Packr released

SpritePackr is a small desktop tool for pack sprites together in a single spritesheet. You can choose the number of rows and columns to set.

Download:
https://salamanderlabs.itch.io/sprite-packr

Godot / GDScript Dialog Box approach

 So, I have a gameplay, an UI over it, and I want in some cases, to ask the player what he wants to do in certain situations.

Comig from a backend/desktop in .net framework background, I use to work with DialogBoxes all the time. But the execution lines and structures are not the same when it comes to gamedev. Also, my experience with Godot is very limited.

I'll show you how I resolved the problem, and if you know any alternative, maybe more efficient, perhaps more elegant, please tell me!

Well, this is so far the gameplay screen, where I've a close button.

When it's pressed, the DialogBox is shown:

And here comes the magic :P

The DialogBox has a setup function that receives the dialog type, the text to show, and the font size. When one of the buttons is pressed, it emits the close signal, passing as well the result pressed, and the dialog type.

Next, I've the UI (a CanvasLayer):

The UI has the show_dialog() function, with the same parameters as the setup from the DialogBox. Also, it connects with the close signal, for receiving it when its called back, and then pops it again with dialog_response signal, to the original caller (in this case, the gameplay). 

Finally I've my gameplay:

Here I firstly connect some signals to the callback functions, including the dialog_response. As will be some variety of dialogs, a type must be specified (for now, it's just a string, but must be an enum). So, when the signal comes, I check if it's a response for a quit game dialog, and if the response is Yes. 

Not the best solution at all, but it works.

Surely in some months I'll be reading this so ashamed.

Godot script code organization

 # Script organization

# 

# 01. tool

# 02. class_name

# 03. extends

# 

# 05. signals

# 06. enums

# 07. constants

# 08. exported variables

# 09. public variables

# 10. private variables

# 11. onready variables

# 

# 12. optional built-in virtual _init method

# 13. built-in virtual _ready method

# 14. remaining built-in virtual methods

# 15. public methods

# 16. private methods