It's time for your daily Flutter thread. What are you coding, anons?

It's time for your daily Flutter thread. What are you coding, anons?

Attached: hotreload.gif (1065x826, 136K)

Other urls found in this thread:

youtube.com/watch?v=6ZCz6Ylqk3A
flutter.github.io/samples/
github.com/flutter/flutter/issues/8410
dart.dev/guides/language/language-tour
dart.dev
flutter.dev
twitter.com/NSFWRedditImage

bump

How hard is it to make something with it?

Not hard at all.

*koding

Basic educational app, Flutter is based af

Attached: F1C38E05-CC3F-41C3-A084-BE94A116EBF7.png (1242x2208, 233K)

Really easy. Definitely easier than native development

Accurate post. This looks like a good tool to lrn2code with. Apart from that, the more frameworks you pile on top of the basic APIs for your platform, the more bloated your app becomes.

S O Y

Sometimes bloat doesn’t matter

>Apart from that, the more frameworks you pile on top of the basic APIs for your platform, the more bloated your app becomes.
Sure, but Flutter apps are compiled into a native ARM code. They're not run on top of a virtual machine like React Native or Xamarin apps.

wot that ide?

>mobile development

Attached: soywojak.png (205x246, 6K)

It's Android Studio, but VSCode is better and lighter.

Flutter apps run on web and desktop, too!

> VSCode is better and lighter.
user...

You clearly have not used Android Studio.

I just started learning it today from docs, and i gotta say, coming from C#, dart is amazing. I love it. Flutter is really neat, especially hot reloading(which has yet to fail for me).
If anyone has tips/resources, please do share.

I thought this Udemy course was a pretty good for learning basics. You can see the first 3+ hours on youtube, but you need to pay or pirate to see rest of the lectures.

youtube.com/watch?v=6ZCz6Ylqk3A

>Flutter apps run on web and desktop, too!
How does that work? Can I share layout code between web and apps or just logic?

It only really makes sense to do if you want to make "modern" desktop apps that make everybody say eww.

Why? Doesn't it compile to native code like mobile apps?

>Can I share layout code between web and apps or just logic?
doubt it, I think it can't even share layout code between iOS and android apps.

You have to use different "widgets" for each of those, forcing you to make 2 layouts. You can still share some code, but obviously not all..

It will probably be same for the web version. Unless you wont your web app to look like android app, you'd probably have to recreate a new layout.

>Can I share layout code between web and apps or just logic?
Both! Both layout and logic are written with the Dart language. If you write an app that looks like a native Android app with material design, it will look exactly the same on iOS, desktop and on web. You could as well make apps that look like native iOS apps, or apps that look like programs with Windows 98 UI aesthetic, and it will always look the same on every platform.

Here's an example of Flutter apps running on your browser. It's still just a technical preview, so they will be working on stuff like making text selectable and overall performance more in the future. These are very simple examples, but you could run them on your phone or desktop and they would look the same. Mobile and Desktop apps obviously would run better because they're compiled into native ARM/x86 code rather than using Javascript like the web versions.

flutter.github.io/samples/

I'm sold. That's really cool.

if you're coming from a background of c-like languages, and have a more functionally-oriented mindset, android's native development is a lot easier.

t. originally wanted to write app in flutter, gave up, wrote it in java

I might rewrite it. not soon though, I just finished the Java app

>doubt it, I think it can't even share layout code between iOS and android apps.
>
>You have to use different "widgets" for each of those, forcing you to make 2 layouts.

You're wrong. At the deepest level, Flutter has a Skia C++ graphics library drawing stuff on a blank canvas. Flutter makes zero use of native Android or iOS UI stuff, widgets or whatever. It just draws everything on the screen by itself. Like, if you used Skia to draw a red circle on white background, it would look exactly the same on every device. That's how Flutter also draws UIs and they will look the same on every platform. Right now, Flutter comes with two predefined styles "Material", that mimics the look of Android apps, and "Cupertino" that mimics the look of iOS apps. You can very easily to customize everything and make an original look that will be consistent on every device.

>I'm sold.
I am not, it is good for native apps. but for web apps? there is no hover and it is not intuitive for desktop users. go check the examples and see for yourself...

>You can very easily to customize everything and make an original look that will be consistent on every device.
yes, but with 2 layouts.. one for the iOS app and one for the android app.

react-native can accomplish that with one layout (the drawback obviously being worse performance since it doesn't run on native code)

Yeah I noticed, but according to they're still working on it. Since my current focus is mobile apps, I don't mind, and it's nice knowing that in the future I will have that option.
I can see how that's a deal breaker for some, though.

user, he said that it's platform-independent. Meaning one layout.

>yes, but with 2 layouts.. one for the iOS app and one for the android app.

No, there is just one layout. The layout is defined programatically by defining a tree of Flutter Widgets (each widget roughly corresponds to a single UI element), that the graphics engine renders.

I am trying it myself (for android app development).

Seems a solid framework. It is very similar to react-native, except it is written in dart (which on the other hand is similar to typescript).

I just need an idea for something I can make with it...

I meant if you want your app too look natively (like an iOS app on iOS and like an material app on android), you'll have to use 2 layouts.

one with material widgets and one with cupertino widgets.

but java is OO

Well, sure, but it would be much easier if you used just the same look for every platform.

Sounds like a valid concern, and it sounds like it's being worked on: github.com/flutter/flutter/issues/8410

Native code does not preclude shitty interfaces. If you take a phone UI and put it on a desktop app, the result will be dogshit.

it triggers people, no? how would you feel if you installed an iOS app and it looks like material design?

btw, I am new to flutter. what would be the best way of doing this? conditionally rendering widgets or?

>if platform === 'ios' use cupertino button
>else material button

or is it necessary to create 2 different apps with some shared code?

Oh I thought you were talking about bloat/performance. Yeah the Material look isn't for everyone, but it seems like you can customize the way widgets look.

can someone explain why i can't make an array by using String[]? why does it need to be []?

Well, first thing you would need to do, is to very clearly to separate the business logic and the UI/Widget stuff in your code. A reactive state management model like BLoC, Redux or Mobx would be good for this. You should probably then create separate .dart files for Android and iOS that only contain the UI stuff but, again, none of the actual logic or information about how your app operates. Then at the root of your Flutter app, instead of writing "return MaterialApp(...", you do a conditional check to see if you're running on Android or iOS and then return something defined in the platform-specific UI .dart files you wrote earlier.

also, wish I had the time and will to convert my react-native app to flutter, just to see if it performs better...

the react-native app drops frames and is laggy on low-end android devices. I've managed to improve it a bit, but still, it's not perfect as of now..

In Dart, arrays are List objects. So, what you're creating is a List.

would this make the app size double what it would have to be if you created 2 different apps? or is flutter clever enough to drop the code for the ios version when compiling the android version?

Ahh, thanks. What's the difference between a Set and a List? Just that Sets have unique elements? And how come I can't access a Set with an indexer but have to use elementAt?

I don't really know, but it shouldn't at least double. You only need to write the UI/Widget stuff twice, the (business) logic part of your code is the same and probably larger part of the code. I do know that when you translate a flutter app into javascript for web, it will check if there are parts of code that are never used and cut them to make the final dart.js that contains your app smaller.

List is ordered, Set unordered. I recommend reading this page to learn more about Dart.

dart.dev/guides/language/language-tour

>List is ordered, Set unordered. I recommend reading this page to learn more about Dart.
>dart.dev/guides/language/language-tour
thanks!

yeah, it shouldn't double... you'll probably reuse those Widgets etc and logic will be probably shared.

I need to finish the tutorials on flutter and find an app idea lol

It's not so much about looks. If you put a menu bar and a toolbar, everything is very easily accessed quickly using keyboard or mouse. If you instead put a giant hamburger menu button that slides open a menu where each item is the size of two fingers, it takes longer to get to anything. This style of interface makes sense on phones, but toss it on a desktop app and you've just made something about as usable as a classic desktop interface would be on a phone.

But you can conditionally render the UI based on the current platform, I'm sure there is a way to create a menu bar & toolbar.

is BLoC shit a meme?

so is dart.
but Java allows you to stay in the comfort zone, for a bit at least. with it, you can have one class for each screen of your app, and just have all of your functions in those. If memory serves right, you had to have layers of objects stacked into each other in flutter, it was a bit hard to wrap my head around that, but I think I could do it now

Anyone here use VSCode? How come code completion doesn't show every class(ex. Colors and IconButton)? Is there a fix?

Are you sure? Mine works fine.

Attached: Screenshot_20190526_020458.png (511x329, 34K)

It completes the members and parameters, but it never actually finds the class.

Attached: 2019-05-25_19-08-37.png (254x74, 8K)

>you can have one class for each screen of your app, and just have all of your functions in those
But that's not a very good thing. If you later decided to change your UI, it would be a colossal pain in the ass to refactor. If you use reactive programming, clearly separate UI code and the business logic code that does the interesting stuff into separate files, it would be really easy.

Do you have

import 'package:flutter/material.dart';


at the top of your file?

Also, are you sure you have to Flutter and Dart extensions for VSCode installed?

Yes

It's just reactive programming. From my understanding, BLoC is very similar to Mobx, but instead of storing the app state in a global singleton store, you just make your state (bloc) visible for a Flutter widget subtree. What you should ask is whether reactive programming is a meme.

Then I'm running out of ideas. Try restarting the editor and making a new Flutter project.

Yep, restarting did it. Seems to be a bug with VSCode then.
I got too used to this convenient feature, lol.

>I got too used to this convenient feature, lol
(not needing to restart after installing extensions)

uma delicia

>BR
[spoiler]just kidding, keep up the good work, user[/spoiler]

Attached: 05bf9f3e0b5a55e96747f43bc2a21559d6a33dfb_00.gif (300x249, 120K)

Remember when SUDDENLY everybody was talking about how great flutter was. And every testimonial was like reading from a PR textbook.

Attached: 1558735465597.jpg (460x288, 26K)

You must be reading some shitty textbooks.

flutter is my nigga
whut txtbok iz tas frum cracka???

Yes, it is a meme. It was clearly proved here yesterday with code samples. 300+ lines for a fucking counter hello world that can be done on a few lines at most. And then there is people who will defend this. Same people who uses react and redux I guess.

Also user just doesn't know what reactive means.

Android dev here. Pic related is what a flutter GUI looks like (or any other 'GUI as code' toolkit). This is one of Flutter's two main disadvantages right now. Another system with the same problem is the new Android Jetpack compose. Both are essentially copied from React's JSX, except React's is better because you can put all css in their own files.

GUI as code is a step back for programmers, as you have structure, style and view logic all mixed together, but makes the life of the idiots at Google much easier and allows for easier composition and reuse (at the cost of verbosity and bloated GUIs). Otherwise Google would have to create a drag and drop GUI editor to help defining the GUI in separate xml or json files, something they have failed to do in Android even after years of bug fixing.

The second main drawback of Flutter is that it is not good enough for iOS, and probably Apple will make sure that never is. They don't want competitors, they want you to use XCode and their own APIs. Apple already did this in the past: they banned from the app store all html5 hybrid apps (Cordova), even though Cordova apps ran reasonably well in iPhones (as compared to slower mediatec processors in Android) . So anyone thinking they can use Flutter as main iOS stack is deluding himself. But for casual use it will be probably acceptable.

Attached: pyramid_of_doom.jpg (720x511, 61K)

Never used Flutter/Dart, what is advantage of using it over native Kotlin/Swift or React Native?

you keep shills employed

>GUI as code is a step back for programmers, as you have structure, style and view logic all mixed together,
There's nothing wrong with having all the UI related code in one place. css files are too static, you can't change them during runtime as freely as when your UI styling is written in code. Also, there's nothing wrong with the code in your image. The UI in Flutter is a tree, widgets nested within widgets nested within widgets... If your code starts to look too messy, you divide it into smaller parts and put them in different files or functions.

I'm not sure what's your problem with Flutter on iOS. Is it the performance? Look and feel of the widgets? Because Flutter is still young and under active development and these things are probably being looked at.

If a shill is the only one willing to actually answer my question then so be it.

>over Kotlin/Swift
With Flutter, you write your app once with Dart and it automatically compiles for both Android and iOS (also for desktop and web, but these are still work in progress). The Flutter SDK is easier to understand and work with than the native frameworks.

>over React Native
React Native apps are JIT compiled on top of a virtual machine that is running on your phone. Flutter apps are compiled ahead of time into native ARM code, which means they will perform better. React Native also depends on the OS to do drawing on the screen (e.g. UIKit on iOS). Flutter uses a Skia C++ graphics library to do all the rendering for your app. You and Flutter are im absolute control over every single pixel that is drawn when your app is running. This makes it possible to make your apps look and feel exactly the same on every platform.

If you like C-like languages, Dart is great.

>there's nothing wrong with the code in your image
user that is an antipattern. It is called pyramid of doom. Don't worry, you are not alone: there are "engineers" at Google thinking this is acceptable.

>the UI in Flutter is a tree
Every UI ever was a tree. I've done GUI in code in Java (swing) and in Blackberry, a lot of time ago. It was really bad. IMHO the only reason they do it in Flutter (for now) is that they didn't bother coding a GUI editor and storyboard editor, something Android and iOS already have. But I'm sure they will make one if this becomes Fuchsia's main dev environment.

>I'm not sure what's your problem with Flutter on iOS. Is it the performance? Look and feel of the widgets?
Performance will not be a problem. iOS microprocessors are really good and have better performance per core that Android's. There will be problems in the look and feel as Apple can update the look of their native widgets globally for the OS for every app, but Flutter will have the old style hardcoded. Apple will most likely try to differentiate their native apps this way. Another problem will be the plugins to access native functionality. This is what happened to Xamarin: Google keep making continuous changes/additions to their APIs in a manner that the new stuff was only available in native Android. This kept Xamarin plugins outdated or broken most of the time.

Oh and most importantly, you don't have to use Javascript with Flutter. Fuck Javascript.

Interesting, thanks for the quick rundown.


Aren't Kotlin and Swift also C-like?

Shhh... Don't say it aloud... Google might dump dart for JS to attract web devs to Fuchsia.

Fair point. Flutter is just mimicking the iOS style, so it will have to keep playing cat-and-mouse if Apple keeps changing their design all the time. Google has chosen material design and seems keen to stick with it. But I can see app development progressing towards being part of a company's branding. They will want to have their apps use a unique design and look and not just feel like a generic iOS app or a generic Android app. You can see it as a weakness, but being able to render your app exactly the same way on every single platform can also be seen as a strength.

OK so how do I learn it until I can get my own app up and running?

This is mostly accurate but I'd like to point a few things:

>The Flutter SDK is easier to understand and work with than the native frameworks.
It is easier for the normal stuff. But if you need to do a pro-level app that absolutely has to work for the customer, you might be in trouble. EG: if Samsung releases a phone with a new Bluetooth chip where the native Android APIs don't work as expected, you can hopefully code a workaround. But with flutter you will probaly have to wait for someone to fix whatever plugin/API it uses to do the BT stuff.

>React Native apps are JIT compiled on top of a virtual machine that is running on your phone
RN apps have native code (classes that are compiled ahead of time using Android's ART compiler just like normal native apps) and JavaScript code, which is interpreted by a runtime that is bundled with your application when you compile it. Actually the bridge between JavaScript and native code is a well-known bottleneck that can be easily saturated if you spam a lot of events to the native part.

Hi, I would like™ to learn more about Google™ Flutter™ and Dart™ programming language. Any tips?

Check out the udemy course mentioned in this post. You can find a torrent for it if you don't want to pay. It will teach you Dart and how Flutter works.
For documentation of Dart, check
dart.dev

For documentation of Flutter SDK, check
flutter.dev

Haha, you're talking about your own posts as if anyone was taking the rubbish you said seriously. Everyone who responded made it obvious you have no idea what you're talking about.
Go and copy paste some binary tree reversing program from stack overflow and feel smart for doing so, or whatever your kind does. I don't get what you even want in the Flutter thread.

Can't you just implement the BT part natively and then have Flutter call it?

What is the easiest way to animate a FAB's icon on press? Just want to alternate between 2 icons.

>don't get
>create retarded mechanism to "manage" state
>call it a pattern
I don't mind that you sell Flutter. I just won't buy you the BLoC shit and I'm free to shit on BLoC as much as I want. I refuse to live in a world where what was easily done in 10 lines has now to be done in 300 because Google says so.
Google has produced some of the worst code ever, they are not exactly known for their beautiful and simple to use APIs. (Flutter is Ok for now, but just give them time)

Attached: 63ggbsdfg.jpg (260x194, 8K)

Apparently yes.

pls ignore, i am autism.
was calling setState after changing variable, but the variable was declared inside the method that returns the Widget
h-haha...

Based Max, he taught me react. I paid for the courses on udemy when they were discounted to like $10. Totally 100% worth it.

i don't see how hot reloading would be language specific

it's really just about recompiling the app and restarting it every time you save. it should be like when you have webpack --watch, which recompiles the react/whatever every time you save

>doesn't use native UI elements

well its a fucking meme. It's better using react-native with the bridge bottleneck than this shit then.

I fell for a meme again... fuck you Jow Forums.