<![CDATA[Stories by Lucas Goldner on Medium]]> https://medium.com/@lucas.goldner?source=rss-8a635e5c004------2 https://cdn-images-1.medium.com/fit/c/150/150/1*vyTkmWCxCW6azLoUeZvukA.png Stories by Lucas Goldner on Medium https://medium.com/@lucas.goldner?source=rss-8a635e5c004------2 Medium Sun, 17 May 2026 10:12:45 GMT <![CDATA[Flutter Element Embedding — Unleashing the Power of Integrating Flutter Apps into Websites…]]> https://medium.com/@lucas.goldner/flutter-element-embedding-unleashing-the-power-of-integrating-flutter-apps-into-websites-e91c84c13f2d?source=rss-8a635e5c004------2 https://medium.com/p/e91c84c13f2d Tue, 23 Apr 2024 22:41:36 GMT 2024-04-23T22:41:36.058Z Flutter Element Embedding — Unleashing the Power of Integrating Flutter Apps into Websites, including React-powered ones!

When I first learned about Element Embedding at FlutterForward 2023, its potential immediately captivated me.

Imagine showcasing a vertical slice of your app directly on your homepage, allowing users to interact with it and truly experience its functionality. But that’s just the start. You can also embed multiple smaller apps within your documentation to demonstrate their behavior in real-time

Capabilities of Flutter Element Embedding:

  • Embedd flutter web-compatible apps into any website
  • Using JS Interop, it is possible to share the state of the app and the website and modify it from each other
The actual Flutter app is rendered on the home page of the webpage. https://flutter-show-docs.vercel.app/

How Can You Implement Flutter Element Embedding?

Achieving this is relatively straightforward. First, I’ll demonstrate how to embed Flutter elements on a simple HTML website for demonstration purposes. If you’re interested in viewing the entire source code, you can refer to the repository provided below:

Element-Embedding-Presentation/example_website/red_counter_homepage at Flutterconnection-2024 · lucas-goldner/Element-Embedding-Presentation

But we will be starting from scratch:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Embedded Flutter Website</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header>
      <h1>See the Flutter app below!</h1>
    </header>
    <div>
      <main>
        <section>
          <div id="flutter_host" style="height: 812px; width: 375px">
            Loading...
          </div>
        </section>
      </main>
    </div>
  </body>
</html>
Starting page

1. We need a web build of our Flutter app. So, let us run the build command:

$ flutter build web

2. Once complete, you must add the following two scripts to your website. Both scripts can be found in the build directory of your Flutter web app. When properly configured, flutter.js manages the loading of the web app and Flutter's service worker.

<script src="./your_built_flutter_app/flutter.js" defer></script>

This snippet, which loads the Flutter app by reading main.dart.js, is also essential. There are numerous parameters available to customize and configure the engine initialization. For more detailed information on these parameters, please visit Flutter Web Initialization Documentation.

The most crucial parameters to consider are the assets and the hostElement, as these dictate where the Flutter app will be embedded on the website.

    <script>
      window.addEventListener("load", function (ev) {
        const basePath = "./your_built_flutter_app/";

        _flutter.loader.loadEntrypoint({
          entrypointUrl: basePath + "main.dart.js",
          onEntrypointLoaded: async function (engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              assetBase: basePath,
              hostElement: document.querySelector("#flutter_host"),
            });
            await appRunner.runApp();
          },
        });
      });
    </script>

Adding both of those results to this updated website:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Embedded Flutter Website</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./flutter_app/flutter.js" defer></script>
    <script>
      window.addEventListener("load", function (ev) {
        const basePath = "./flutter_app/";

        _flutter.loader.loadEntrypoint({
          entrypointUrl: basePath + "main.dart.js",
          onEntrypointLoaded: async function (engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              assetBase: basePath,
              hostElement: document.querySelector("#flutter_host"),
            });
            await appRunner.runApp();
          },
        });
      });
    </script>
  </head>
  <body>
    <header>
      <h1>See the Flutter app below!</h1>
    </header>
    <div>
      <main>
        <section>
          <div id="flutter_host" style="height: 812px; width: 375px">
            Loading...
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

And that is it 🎇! Enjoy the result below:

But I use React. How can I integrate it there?

I encountered some issues when trying to apply the steps I had learned. Fortunately, I managed to figure it out with the help of a user’s guide. I will explain the process in the following step

1. Run this command in your Flutter app to create a web version:

$ flutter build web --profile --dart-define=Dart2jsOptimization=O0

This command will not generate a minified JavaScript version because some adjustments need to be made in the build output. As a result, the client will have to download a larger bundle.

2. Copy the web folder from /build/web/ to the public folder in your React app. In this project, I have renamed the folder to Flutter. All our Flutter files are now hosted at YOUR_HOST/flutter/.

Navigate to public/flutter/main.dart.js. In the next step, replace the t1 path with your folder name.

// what you will need to find
    getAssetUrl$1(asset) {
      var t1, fallbackBaseUrl, t2;
      if (A.Uri_parse(asset).get$hasScheme())
        return A._Uri__uriEncode(B.List_5Q7, asset, B.C_Utf8Codec, false);
      t1 = this._assetBase;
    }

// replaced
    getAssetUrl$1(asset) {
      var t1;
      if (A.Uri_parse(asset, 0, null).get$hasScheme())
        return A._Uri__uriEncode(B.List_5Q7, asset, B.C_Utf8Codec, false);
      t1 = "/flutter/";
    }

3. Edit flutter.js

// Search for this
function getBaseURI() {
  const base = document.querySelector("base");
  return (base && base.getAttribute("href")) || "";
}

// Use the same path as before
function getBaseURI() {
  return "/flutter/";
}

4. Create a flutter_init.js file inside your public folder of the react app and paste the following content into it:

window._stateSet = function () {};
window.addEventListener("load", function (ev) {
  let target = document.querySelector("#flutter_target");
  _flutter.loader.loadEntrypoint({
    onEntrypointLoaded: async function (engineInitializer) {
      let appRunner = await engineInitializer.initializeEngine({
        hostElement: target,
      });
      await appRunner.runApp();
    },
  });
});

5. Install react-helmet-async so we can run our flutter_init script

$ yarn add react-helmet-async

6. The setup is done now. You need to wrap your React App with a HelmetProvider and provide a helmetContext (can be empty).

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { HelmetProvider } from "react-helmet-async"
import './index.css'

const helmetContext = {};

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <HelmetProvider context={helmetContext}>
            <App />
        </HelmetProvider>
    </React.StrictMode>,
)

7. Now that that is resolved, add a Helmet component and our flutter_init.js + flutter.js. This will load the Flutter app, and that was it!

import { Helmet } from "react-helmet-async";

function App() {
  return (
    <>
      <Helmet>
        <script src="/flutter/flutter.js" defer></script>
        <script src="/flutter_init.js" defer></script>
      </Helmet>
      <div
        style={{ aspectRatio: 9 / 19.5 }}
        id="flutter_target"
        className="h-full"
      ></div>
    </>
  );
}

That was it! Now, your Flutter app should be displayed in React as well!

—

The process can be cumbersome, so I also wrote a small script to simplify it, as some steps need to be repeated with each build. Feel free to copy and adjust this script for your purposes.

Now, let’s make the interaction between the website and the app more dynamic by allowing them to manipulate each other

The next goal is to enhance the website by adding elements that can read and display the app's state. In our example, I've added a text field designed to show the current number from the app and an "Increase" button to modify this number. Here’s a reference to how it looks:

To implement this interaction, it is essential to facilitate communication with JavaScript. This can be achieved using JavaScript Interoperability (Js Interop), which allows the Flutter app and the website to interact seamlessly.

1. First, add the js package

$ flutter build web

2. This step will vary depending on your app and its specific requirements. For instance, within your Flutter app, you should export all functions and states that you want to be accessible via JavaScript. Here is an example of how you might configure this:

Element-Embedding-Presentation/example_website/red_counter_app/lib/main.dart at Flutterconnection-2024 · lucas-goldner/Element-Embedding-Presentation

In this scenario, we use the @js.JSExport() annotation for the state, which needs to be assigned using the js_util library's setProperty function. This setup maps the state to a string, making it accessible from the JavaScript side. Additionally, the callMethod function allows you to invoke JavaScript functions from Flutter. It also supports passing additional values in its array, providing further flexibility for interaction between the Flutter app and the website.

@js.JSExport()
class _MyHomePageState extends State<MyHomePage> {
  final _streamController = StreamController<void>.broadcast();
  int _counterScreenCount = 0;

  @override
  void initState() {
    super.initState();
    final export = js_util.createDartExport(this);
    js_util.setProperty(js_util.globalThis, '_appState', export);
    js_util.callMethod<void>(js_util.globalThis, '_stateSet', []);
  }
....
}

For any function or variable you want to make accessible from JavaScript, you need to mark it with the same decorator, like so:

  @js.JSExport()
  void addHandler(void Function() handler) {
    _streamController.stream.listen((event) {
      handler();
    });
  }

  @js.JSExport()
  int get count => _counterScreenCount;

The reason for using a stream controller in a straightforward app like Flutter is to facilitate sending “updates” to the website’s text field, which we plan to add. This method ensures that any changes in the app can be dynamically reflected on the website, enhancing interactivity and user experience.

3. Now that everything is configured on the Dart side, it’s time to move forward. Next, we’ll bind our exported functions and states to variables. To keep the logic organized, I’ve created a new main.js file where I manage these assignments:

// Sets up a channel to JS-interop with Flutter
(function () {
  "use strict";
  // This function will be called from Flutter when it prepares the JS-interop.
  window._stateSet = function () {
    window._stateSet = function () {
      console.log("Calls _stateSet once!");
    };

    // The state of the flutter app, see `class _MyAppState` in lib/main.dart.
    let appState = window._appState;

    let valueField = document.querySelector("#value");
    let updateState = function () {
      valueField.value = appState.count;
    };

    // Register a callback to update the HTML field from Flutter.
    appState.addHandler(updateState);

    // Render the first value (0).
    updateState();

    let incrementButton = document.querySelector("#increase-btn");
    incrementButton.addEventListener("click", (event) => {
      appState.increment();
    });
  };
})();

And in our index.html, I load with this script:

<script src="./main.js" defer></script>

So, the final result of our code becomes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive Red Counter - Revolutionary Counting App</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./flutter_app/flutter.js" defer></script>
    <script src="./main.js" defer></script>

    <script>
      window.addEventListener("load", function (ev) {
        const basePath = "./flutter_app/";

        _flutter.loader.loadEntrypoint({
          entrypointUrl: basePath + "main.dart.js",
          onEntrypointLoaded: async function (engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              assetBase: basePath,
              hostElement: document.querySelector("#flutter_host"),
            });
            await appRunner.runApp();
          },
        });
      });
    </script>
  </head>
  <body>
    <header>
      <h1>See the Flutter app below!</h1>
    </header>
    <div class="main-content">
      <main>
        <section class="interactive-iphone-display">
          <div id="flutter_host" style="height: 812px; width: 375px">
            Loading...
          </div>

          <div class="counter-controls">
            <button id="increase-btn">Increase</button>
            <div class="current-number">
              <label for="current-number-field">Current Number:</label>
              <input
                id="value"
                type="text"
                id="current-number-field"
                value="0"
              />
            </div>
          </div>
        </section>

        <section class="features">
          <h2>Features</h2>
          <ul>
            <li>Stunning Red Color Scheme</li>
            <li>Intuitive and Simple Counter Interface</li>
            <li>Revolutionary One-Tap Counting Technology</li>
          </ul>
        </section>

        <section class="download">
          <h2>Download Now</h2>
          <p>Join the counting revolution today. Available on all platforms.</p>
        </section>
      </main>
      <footer>
        <p>&copy; 2023 Red Counter. All Rights Reserved.</p>
      </footer>
    </div>
  </body>
</html>

Let us try it out🔥

Now that we have established direct communication, you can change the app’s state using the website and vice versa. This opens up a wealth of new possibilities for interaction and functionality. If you have any impressive examples or innovative uses, please share them with me on X.

The code is available here if you want to look something up:

Element-Embedding-Presentation/example_website/red_counter_homepage at Flutterconnection-2024 · lucas-goldner/Element-Embedding-Presentation

Other frameworks?

…And that was it. Please let me know if you have any questions. I am happy to help 😄

]]> <![CDATA[How I Survived My First BIG Tech Presentation — Fluttercon 2023]]> https://medium.com/@lucas.goldner/how-i-survived-my-first-big-tech-presentation-fluttercon-2023-f6c1c10f0263?source=rss-8a635e5c004------2 https://medium.com/p/f6c1c10f0263 Sun, 03 Sep 2023 13:28:59 GMT 2023-09-03T13:28:59.249Z How I Survived My First BIG Tech Presentation — Fluttercon 2023
Fluttercon 2023 Banner

Before I start going through the emotional rollercoaster that this journey has been, it would make sense to give a bit of context about myself.

I am Lucas Goldner, 22, studying Media Informatics at HdM in Stuttgart, Germany. I have been coding for around 2–3 years and using Flutter specifically for a year. Before this event, I had never given a talk at a big conference. I have given a talk before at a local meetup in Stuttgart, but that was much smaller. So, with only one talk given and one year of Flutter experience:

You might wonder, how did I end up here?

Application Phase

Flutter Forward Event

It all started at FlutterForward this year when they discussed the FFIGen library. Since my talk was about FFIGen, I won’t go into full detail about FFIGen. Still, to summarize, it took the work I made a month earlier and allowed it to be done automatically 😢. It is a fantastic tool, but I was shocked to hear this was so easily possible.

Out of curiosity, I researched the topic and tried it myself. The result was that it worked, and it took me way less time to build the feature than before.

I was stunned to see that nobody was talking about this, and by that time, I had heard of the Fluttercon event. The call for speakers has already started, but I was not initially sure if I should apply there. As I have said, I have only done one small tech talk at a local meetup in Stuttgart with a much smaller audience. This event would be different since people are paying to attend this event and coming from all over the world.

I then talked to a good friend about this topic, who suggested I try applying at least. The worst case would be that I get declined, and in the best case, I would get a fantastic opportunity. So, in the end, I did that:

Lucas Goldner 💙 on Twitter: "Just finished my submission for the Fluttercon in Berlin this year. If I really get the opportunity to talk there, that would be huuuggeeee. The topic itself is interesting, and I have a nice story to follow, so it could be a fantastic talk. pic.twitter.com/PAkzuY61rs / Twitter"

Just finished my submission for the Fluttercon in Berlin this year. If I really get the opportunity to talk there, that would be huuuggeeee. The topic itself is interesting, and I have a nice story to follow, so it could be a fantastic talk. pic.twitter.com/PAkzuY61rs

Two months passed, and the event was getting closer and closer. I started forgetting about the event and focusing on work and other stuff until suddenly, on a Sunday, I received an email that made me fall out of my chair and made me write this tweet:

Lucas Goldner 💙 on Twitter: "Wait WHAT? O_O UHMMMMMM COOL ??? OK, I GUESS I AM REALLY GOING TO DO IT. Really excited for this opportunity pic.twitter.com/9YIZE7eiw8 / Twitter"

Wait WHAT? O_O UHMMMMMM COOL ??? OK, I GUESS I AM REALLY GOING TO DO IT. Really excited for this opportunity pic.twitter.com/9YIZE7eiw8

I cannot describe my feelings there, but there was excitement. So, in the weeks leading up to this event, I had to make sure I delivered a speech that people would remember (positively 😅).

Preparation Phase

When I received that email, I had already done my presentation, and others who had seen it also thought it would be a “good” talk. But good was not enough. During a meetup, I talked again to the same friend about the presentation. This was the night that would make my presentation fundamentally change.

I don’t remember exactly how I thought of this, but the idea was to remake the entire presentation in Flutter. I think my issue was that to demonstrate everything, I had to switch around many windows and could not show the feature I built itself, so I wanted to integrate that into my presentation. And that's where the hustle phase began:

It took me around one month to build all slides, which is also where I hit a big problem 😟. To make it short, I wanted to get the AirPods data through the CMHeadphoneMotionManager class that Apple provides.

That works if you run it on iOS. Still, as soon as you try to run the same code on macOS, you will receive an error saying that Coremotion is only available on iOS, which means that I could not access the CMHeadphoneMotionManager. That was a big blocker for me since that would mean that everything I have done to that point would have been useless 😧.

Lucas Goldner 💙 on Twitter: "Coremotion is not available on macOS at all 😨 uhm...damn...So now I need to find another way to do this cool thing I was planning for my presentation. Really unfortunate, I don't see any reason why the framework should't be available. I guess nobody would use it but still damn.. / Twitter"

Coremotion is not available on macOS at all 😨 uhm...damn...So now I need to find another way to do this cool thing I was planning for my presentation. Really unfortunate, I don't see any reason why the framework should't be available. I guess nobody would use it but still damn..

What I tried then were the following options:

  • Run the app as an iOS app on my Mac since the M1 chips allow me to do that and get the data from there somehow
    -> Resulted in the app just not picking up any data at all
  • Research ways of making a macOS app with an iOS companion app? that can communicate, but that would have made it more complex.

At that point, I thought that my presentation wouldn’t be able to be as good as I imagined, but here comes my friend again with a great solution:

“Why don’t you directly transfer the data from your phone to your Mac?”
(Not a direct quote)

That was brilliant💡!

So I did precisely that. I build a separate iOS app that gets the data from the AirPods, connects to a WebSocket server, and keeps transmitting it. Since I already made the Flutter Airpods package https://pub.dev/packages/flutter_airpods, the implementation was quickly achievable.

Then I needed a WebSocket server, but since I had a project at university where I used WebSockets servers a lot, this also was an easy task.

So, the last thing left was the presentation to connect the server and keep processing the incoming data. Everything worked out in the end. I built the presentation precisely the way I imagined it 👌.

Now, I just had to practice the talk over and over and over and over so that I did not mess that part up. I looked up some good practices for public speaking and ways of integrating the audience. On purpose, I avoided watching tech talks since I wanted to keep my style of presenting and not be influenced. One exception to that rule was the talk from Pooja Bhaumik at Flutter Vikings 2022:

Since I followed her for some time on Twitter and wanted to see how a good tech talk is supposed to look like and I think I could not have picked a better talk. If you have not watched it, I recommend doing so, since she also showcases her Snapchat Filters live on stage. So that was kind of similar to my presentation style.

Event time ⏲

Wednesday, 5th of July, 12:10 at the Johnson room is where my presentation would take place.

The day before when I was practicing I ran into some issues connection my AirPods, so I was bit worried about connecting them during my presentation. I changed the presentation so that I would connect them beforehand, so that they will definitely be available and transfer the data correctly.

One thing that put a lot of pressure on me before my presentation was, that during the keynote in the morning it was mentioned that 300+ submissions were sent and 90 of those including mine was selected 😰. When I heard that I was shocked that firstly so many people applied (which is reasonable of course) and also then out all of those mine was selected?!?

From this point forward I actually have no memories, since I just presented my talk and I guess many other speakers also feel like that 😆.

Luckily Raphael recorded me here, so I can show those awesome clips here, which took most time developing. (Thx again 😆)

Raphael De Lio on Twitter: "@LucasGoldner showing us how he integrated AirPods with #Flutter to use its sensors to track his head and also push ups! @FlutterconEU #paneladev @sseraphini #bolhadev pic.twitter.com/mGx2IAM3tx / Twitter"

@LucasGoldner showing us how he integrated AirPods with #Flutter to use its sensors to track his head and also push ups! @FlutterconEU #paneladev @sseraphini #bolhadev pic.twitter.com/mGx2IAM3tx

As I said I have no recollection of what I said or did at the talk, but I got a lot of compliments at the end of the talk from various people and many remember me now as that “AirPods/Pushup Guy” so I think thats a good thing.

The only mistake that I did during the talk, which I noticed afterwards is that I kept my AirPods in my ears after the pushup for the rest of the presentation, but I guess nobody noticed 😆.

What can we learn out of this?

Rather than procrastinating like me in the beginning, just go for it!
I know it can be scary at first, but what do you have to lose?
Submitting a talk won’t hurt, you can still decline if you prefer not to do it, but if you come this far I think continuing will be totally worth it.

Thanks again a lot to my friend, that helped me a lot on this journey!

Honestly one week after all of that I cannot process that all of this happened and turned out like that. I learned a lot about myself and think that I grew a lot from this experience.

This event and talking to so many amazing people also has motivated me to further improve and I promise my next talk will be even better 💪.

I hope that with this crazy story that I shared I could motivate people to also try to make a tech talk themselves. I do not have as much as experience in giving talks as other people, but if you are searching for any kind of help or want someone to give some guidance, feel free to contact me on Twitter (or X as its called now).

Check the final result here:

Comparing ways of accessing native functionality

And here the source code:
https://github.com/lucas-goldner/fluttercon_2023_presentation

]]> <![CDATA[Presentations made easy in Flutter — FlutterShow⚡]]> https://medium.com/@lucas.goldner/presentations-made-easy-in-flutter-fluttershow-79ab316253b5?source=rss-8a635e5c004------2 https://medium.com/p/79ab316253b5 Sun, 30 Jul 2023 16:57:16 GMT 2023-07-30T16:57:16.044Z Presentations made easy in Flutter -FlutterShow⚡

Introduction

Flutter is known for being a fantastic framework for cross-platform apps. Over the last few years, a prominent community has formed around it, leading to many events where passionate people deliver talks on their favorite framework. Now imagine this for a second, what if the presentations about Flutter were also made in Flutter?

How I came up with this idea: This year at Fluttercon 2023, I gave my first talk at a big conference, so I wanted to give it my best and make the presentation memorable. During a practice run, I thought about how annoying it was to switch between windows and how cool it would be to present my implemented feature directly on stage to make it more engaging to watch. This led me to create the presentation in Flutter on my MacBook to access the native APIs now from inside the presentation and display it. (If you are intrigued, here is the result)

Indeed, I am not the first person to come up with this idea, as there have been some solutions and speakers before that had the same idea, but I could not find any preexisting solution by googling, so I did it myself. This led to the creation of FlutterShow⚡. It is a framework I created from the finished presentation while making it easier to work with for other speakers.

FlutterShow/docs/images/fluttershow.png at main · lucas-goldner/FlutterShow

Creating the presentation

  • Clone/fork the repo and run the steps detailed in the Project Setup section.
  • Now run your presentation, and you should see the following:
A clean-looking title slide 😎

Now that we are ready to go, let’s create our first slide in only two steps:

  1. Make a new folder in the slides directory and create a new widget:

2. Now navigate to lib/presentation/config/pages_of_presentation.dart and add a new enum member using our newly created CreditsSlide widget. Remember, the enum order actually matters, so if you add it at the beginning, it will show as the first slide as well.

Reload the presentation, and voilá here is our result:

Congrats, a credits slide appeared 🎉

Done. Thx for reading this article, and leave some claps!

… Can it be animated?

Yes, indeed, most components of FlutterShow⚡ can be animated automatically. For this, I implemented a small animation API. The presentationController that holds our presentation state has a property called animationIndex. We can make use of that in only two steps as well!

  1. Return to lib/presentation/config/pages_of_presentation.dart and set animationSteps to 5. By doing that the presentation knows that it has 5 “steps” to cycle through on that slide. We set it to 5 because we have a subtitle on that page + 3 bullet points that we want to appear on each click. The last click will make its transition to the next slide.
  2. Now we need to return to the credits slide we implemented and provide one parameter: animationIndex: controller.animationIndex

And we are done again 😄!

Animation without much effort would be a dream, right?
FlutterShow⚡ has got you covered 🤙🏼 Now you have learned how to create a slide and animate it. From here on, you can create your entire presentation.

If you want to find out how to change the way the bullet points animate from a fade to an animation in which they slide into the screen, then I would recommend heading to:
https://flutter-show-docs.vercel.app/docs/quick-start#theres-more

Closing words

As you can see FlutterShow⚡ makes creating presentations easy and fast, the latter being very important for speakers since many tend to do their presentations last minute, from what I observed 😅.

Anyway, with FlutterShow⚡ I hope I was able to build a good ecosystem for presentations. The packages that FlutterShow⚡ depends on are also available outside of this framework. If you prefer one of the other solutions, you can still use my prebuilt widgets to make your process easier. Check out the documentation to read more about all components: https://flutter-show-docs.vercel.app/docs/intro

FlutterShow⚡ is my first big open-source project, and I will continuously be working on it to make the toolkit for future talks and other speakers, so that is why feedback is vital to me so that I can improve the framework. Currently, we have FlutterShow Keynote, which recreates all of Keynote’s slides in Flutter. I already have many other features in mind, but I plan to implement all of Google Slides Slides as another option in the future. If you have any idea or found something that can be improved, raise an issue:

GitHub - lucas-goldner/FlutterShow: Unleash your creativity with presentations like never before! FlutterShow is an easy-to-use framework built in Flutter for crafting engaging and interactive presentations.

(And leave a ⭐️)

Please let me know if you plan to create a presentation using FlutterShow!

]]>