Flutter

Checklist for Flutter App Development

  • create wireframes or design mockups
  • decide on design assets: icons set, images.
  • create a new flutter project from the prepared or common template
  • architectural design pattern (MVC, MVVM)
  • State management strategy (Provider, BLoC, Riverpod)
  • Navigation strategy: Navigator, named routes)
  • Select layout from known you ready layouts
  • Data storage strategy (local, cloud, mixed)
  • Data storage library: (sqlite, sharedpreferences, indexed-db)
  • testing (per widget, automation)
  • internaization and localization (languages, units)
  • accessibility
  • If cloud is used
    • Platform(s) to use (Firebase, GPC, AWS, Azure, Heroku, etc.)
    • BaaS/Computing (AWS Lambda, Firebase Cloud Functions)
    • Database/Realtime
    • File Storage
    • Authentication strategy (Firebase Authentication, AWS Cognito)
    • Messaging Queue
    • Logging and monitoring
    • Push notifications (firebase cloud messaging, onesignal)
  • deployment (set up app icons and splash screen), configuration build settings for Android and IOS
  • test the app on real devices
  • App Store and Playe Store Submissions (screenshots, descriptions)
  • Deployement host (for web)
  • Monitoring. App performance, user feedback
  • Issues managing post-launch
  • Upades plan
  • Documentation codebase
  • CI/CD connection
Continue Reading Checklist for Flutter App Development

My Look Book – my first multi-platform application in Flutter

🚀 Introducing My Look Book: Your Personal Visual Organizer on Multiple Platforms!

Welcome to the debut of My Look Book, a new application changing the way you visualize and organize your creative inspirations! This first release may be a sneak peek into what’s to come, but it already promises to be a game-changer for anyone seeking an intuitive solution for managing visual information.

🌟 Key Features of My Look Book v1.0:

  1. Create a Look: My Look Book allows you to craft personalized ‘looks’ by seamlessly compiling and arranging visual snippets. Express your creativity by combining images into a cohesive visual narrative!
  2. Effortless Navigation: Swipe your way through your collection of looks with ease. Navigating between looks is as simple as a right or left swipe, ensuring a smooth and intuitive user experience.
  3. Design Flexibility: Build your look page effortlessly by connecting and ordering images using a convenient drag-and-drop interface. Tailor your visual story to perfection with My Look Book’s user-friendly design tools.
  4. Image Uploads: Easily upload images from your gallery, bringing your inspirations to life within the app. My Look Book empowers you to seamlessly integrate your personal visual content into your curated looks.

🛠️ Technical Details:

While this initial version may have a few rough edges in terms of UX and design, rest assured that a comprehensive roadmap is in place for future updates. My Look Book v1.0 uses local web storage to ensure the privacy and protection of your visual information. Your data stays securely within the application, with no external sharing, providing a safeguarded space for your creative expressions.

🌟 Key Features of My Look Book v1.0:

  1. Create a Look: My Look Book allows you to craft personalized ‘looks’ by seamlessly compiling and arranging visual snippets. Express your creativity by combining images into a cohesive visual narrative!
  2. Effortless Navigation: Swipe your way through your collection of looks with ease. Navigating between looks is as simple as a right or left swipe, ensuring a smooth and intuitive user experience.
  3. Design Flexibility: Build your look page effortlessly by connecting and ordering images using a convenient drag-and-drop interface. Tailor your visual story to perfection with My Look Book’s user-friendly design tools.
  4. Image Uploads: Easily upload images from your gallery, bringing your inspirations to life within the app. My Look Book empowers you to seamlessly integrate your personal visual content into your curated looks.

🔧 Technical Insights

Development Framework: My Look Book has been crafted using Flutter, a versatile and efficient open-source UI software development toolkit. Flutter’s ability to create natively compiled applications for mobile, web, and desktop from a single codebase ensures a seamless and consistent user experience across diverse platforms.

Local Storage for Mobile Devices: In the current version (v1.0), My Look Book leverages local storage solutions for mobile devices. This ensures that your visual inspirations are securely stored on your device, providing quick access and a responsive user experience. Local storage on mobile devices allows for efficient data management and retrieval without compromising on performance.

Cookies Local Storage for Web Applications: In this version of of My Look Book, the local storage mechansim has been implemented, which is Cookies for the Web platform and SQLite for the mobile app. In the Web platform, application stores and retrieve sdata within the user’s web browser, data remains in the user’s device. However, this approach also means that cleaning up Cookies will lead application to data loss. 

Roadmap for the Next Version: Cloud Data Storage: The upcoming versions have a compelling roadmap with plans to transition to cloud data storage. This strategic move will enhance data accessibility, enable seamless synchronization across multiple devices.

As I continue to evolve My Look Book, the commitment to a robust and user-friendly experience remains steadfast. Stay tuned for updates as I embrace the power of the cloud to elevate the way you visualize and organize your inspirations! 

Embrace the future of visual organization with My Look Book, where your ideas come to life on Android, iPhone, and the web. Stay tuned for exciting updates as we refine and enhance your experience in the versions to come! 🚀✨

Continue Reading My Look Book – my first multi-platform application in Flutter

The Power FutureBuilder in Flutter

When it comes to building responsive and dynamic Flutter apps, the FutureBuilder widget is an invaluable tool in a developer’s arsenal. In this blog post, we’ll explore how FutureBuilder simplifies handling asynchronous operations and elevates the user experience of your Flutter applications.

Understanding FutureBuilder

FutureBuilder is a widget in Flutter that lets you efficiently manage and display asynchronous data. It’s especially useful when dealing with operations like fetching data from APIs or performing time-consuming computations. FutureBuilder simplifies the process of showing loading spinners, error messages, and data when it becomes available.

How Does It Work?

FutureBuilder takes a Future and a builder function as parameters. The builder function is executed when the Future is complete, providing you with the data obtained from the async operation. In the meantime, you can show loading indicators or error messages, making your app more user-friendly.

Example Usage

Consider a scenario where you’re fetching data from a web API. You can use FutureBuilder to display a loading spinner while the data is being fetched and an error message if the operation fails. Once the data is available, you can display it beautifully in your app.

FutureBuilder(
  future: fetchDataFromApi(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Data: ${snapshot.data}');
    }
  },
)

Continue Reading The Power FutureBuilder in Flutter

Books to learn Flutter

How do I learn Flutter? ? Which books are recommended for enhancing my expertise?

Here’s my bibliography for learning the Flutter framework.

Taking Flutter to the Web – This book serves as a definitive resource for those seeking to understand the correct approach to developing Flutter applications for the web platform. It delivers a comprehensive and structured body of knowledge encompassing the Flutter framework’s utilization for web development, covering key aspects such as web widgets, architectural considerations, and the distinctions between native and web application development.

Flutter Projects: A practical, project-based guide to building real-world cross-platform mobile applications and games – Many books cover programming languages, but this one stands out as a fantastic resource that showcases various projects and solutions for a range of tasks and approaches.”

Continue Reading Books to learn Flutter

Dart is awesome

I recently started working with Flutter by creating my first mobile application for the company’s hackathon.

Prior, I took the course in O’Reilly, which amazingly introduced me to the world of “one code – multiple platforms”.

Flutter is the whole story and requires a separate post.

In the few posts, I’d like to share my expression from the Dart language – which is the language of programming for Flutter apps.

What is Dart

Dart is a programming language designed for client development,[8][9] such as for the web and mobile apps. It is developed by Google and can also be used to build server and desktop applications.
It is an object-oriented, class-based, garbage-collected language with C-style syntax.[10] It can compile to either native code or JavaScript, and supports interfaces, mixins, abstract classes, reified generics and type inference.[11]

Wikipedia

The Flutter multi-platform applications are programmed with Dart.

Dart code can be easily converted to JavaScript using dart2js tool.

There is a huge similarity between Dart syntax and Java and JavaScript languages as well as implemented features from other languages like Python.

While JavaScript implements the OOP principles prototypical, the syntax of Dart, is very close to Java with some additional possibilities (like positional and named parameters constructor, default values).

The ease of working with JSON structures and working with them as a Dart object.

Mixins, the widely used feature in Python, can be easily implemented in Dart as, one of the solutions, for multiple inheritances.

Concurrency is another important feature for developing powerful applications. Here, the syntax is also very similar.

String interpolation is the easy and clear way of constructing dynamic contents.

Example

main() {
var h = “Hello”;
final w = “Hello”;
print(‘$h $w’);

print(r’no interpolation for $h $w’);

var hello = ‘Adjusting’ ‘String’;
print(hello);

print(‘${hello.toUpperCase()}’);
print(‘The answer is ${5 + 10}’);


var multiline = “””
This is
miltiline “””;
print(multiline);
}

Dart basic code “Hello World”

Reference

Dart Language Tour by dart.com

Dart in action, by Chris Buckett

Continue Reading Dart is awesome