My New Way of Building Flutter UI

Поделиться
HTML-код
  • Опубликовано: 5 авг 2024
  • I'm building this as an open-source project.
    Star this repo for future updates 👉 github.com/FilledStacks/expre...
  • НаукаНаука

Комментарии • 22

  • @Kilosrc
    @Kilosrc 4 месяца назад +11

    As soon as I heard you say "generated", I knew you were South African😂

    • @FilledStacks
      @FilledStacks  4 месяца назад +2

      hahaha, absolutely. I'm from the SA!

  • @awdheshdubey2549
    @awdheshdubey2549 4 месяца назад

    amazing, Please make more videos like this that was soo cool

    • @FilledStacks
      @FilledStacks  4 месяца назад +1

      I’ll keep sharing as I develop the package

  • @vincentmontano4518
    @vincentmontano4518 3 месяца назад

    App Size Concern: Is the size of the application going to increase due to the inclusion of assets from Rive?
    UI Responsiveness: How does the application's user interface (UI) adjust to fit different screen sizes, both small and large?

    • @FilledStacks
      @FilledStacks  3 месяца назад +1

      Thanks for the question.
      1. It will increase by a little bit, the same as when you add image assets etc
      2. We decided to use the same approach as framer, with 1 artboard per form factor. It automatically swaps between them based on the device you're on.
      Here's a working example: github.com/FilledStacks/expression-ui/pull/1

  • @ilyeskesri6524
    @ilyeskesri6524 4 месяца назад +1

    Could you explain how this work ? In a video.

    • @FilledStacks
      @FilledStacks  4 месяца назад +1

      Yes, absolutely.
      I plan on making an entire video about this. I wanted to share this process in this form because it's still an experiment.
      But soon I'll be done building my first production app using this approach then I'll make a full breakdown of how it works.

  • @IAmTheMainCharacter
    @IAmTheMainCharacter 4 месяца назад

    what about responsiveness?

    • @FilledStacks
      @FilledStacks  4 месяца назад

      I do it the same way Framer does it.
      An artboart per form factor.
      - mobile
      - tablet
      - desktop
      - watch
      Here's an example video of that. x.com/DaneMackier/status/1772237910252621825

  • @aouadicharaf1038
    @aouadicharaf1038 3 месяца назад

    ❤❤❤

  • @alitatlici2107
    @alitatlici2107 4 месяца назад

    Did you make the ui part from Figma?

    • @FilledStacks
      @FilledStacks  4 месяца назад

      Yes, I designed in Figma, then I built the UI in rive.

    • @meysammahfouzi
      @meysammahfouzi 3 месяца назад

      Why not just Rive? What is it that you can do in Figma and is not possible in Rive?

    • @FilledStacks
      @FilledStacks  3 месяца назад +1

      @@meysammahfouzi I enjoy designing in figma, the controls are easier, all my shared components are there that I can re-use in different projects and all my previous designs are there for other apps that I can re-use as well.
      So the design phase goes much faster, given it's built for design.
      Rive lacks some control based input that figma has, but once they add it I can do all my design in Rive as well.

  • @sergiofranklin8809
    @sergiofranklin8809 4 месяца назад

    wow, tell about this more

    • @FilledStacks
      @FilledStacks  4 месяца назад +1

      I'll be sharing more about this soon.

  • @atishayjain1141
    @atishayjain1141 2 месяца назад

    Why don't you try Figma to code?

    • @FilledStacks
      @FilledStacks  2 месяца назад

      I don't want to maintain or write any UI code.

    • @atishayjain9341
      @atishayjain9341 2 месяца назад

      I didn't get you, if we are exporting code from figma then you don't have to write Or maintain ui code right?

    • @FilledStacks
      @FilledStacks  2 месяца назад

      @@atishayjain9341 based on the 5 I have tried the code didn’t work as is. Plus, you have to integrate your state and business logic which means you have to modify that code.
      so you have to update the code to fit into your project and the refactor so it can use shared widgets instead of pure from scratch widgets every time.
      Code gen is basically just someone else’s coding patterns for UI in your codebase, that you then have to maintain for the rest of time when that UI has to change.