\nThis article was originally published on CSS Tricks. \nUpdated here on 12/2/2019\n
\n\nFlutter is a mobile SDK that, at its core, is about empowering everyone to build beautiful mobile apps. Whether you come from the world of web development or native mobile development, Flutter makes it easier to create mobile apps in a familiar, simplified way, without ever giving up control to the framework.\n\nAs of this writing, Google AdWords, Alibaba, and BMW (to name a few) are using Flutter in production. You can see more examples of who's using Flutter (including the app I've worked on) on Flutter's website on the showcase page.\n\nRight now, there's a lot of buzz about Flutter. The question I see most often is, \"Flutter or React Native...which one should I use?\" Like all things in programming, its all about the tradeoffs you're willing to make.\n\nI'm going to try to convince you that Flutter is the best option for mobile app development. I believe it's better than any other cross platform framework, and it's possibly better than native development - but more on that in a bit.\n\nBefore that though, let me walk (quickly) through what Flutter is, and what it is not, starting with the Dart programming language.\n\n
What's Dart?
\n\nDart is a programming language created by Google and was used to write Flutter. Dart was created, more or less, because Google wanted a language that was \"better\" than JavaScript to write server side and front-end code. From what I understand, the main issue they had with JavaScript is how slowly it updates with new features since it relies on a huge committee for approvals and several browser vendors to implement it.\n\nAfter a series of decisions about whether to take on JavaScript directly or not, Google decided to make a language that semantically fit inside of JavaScript. In other words, every single thing you write in Dart can compile to JavaScript. This is why they didn't just use Java - it's semantically huge.\n\n
\n\nThe fundamentals of Dart are similar to all high-level languages. That said, programming languages are, as it turns out, hard to learn.\n\nThere's good news, though. Dart excels at being a \"safe\" language to learn. Google didn't set out to create anything innovative with Dart. They were seeking to make a language that was simple, productive and could be compiled into JavaScript.\n\nThere is nothing particularly exciting about its syntax, and no special operators that will throw you through a loop. In Dart (unlike JavaScript), there is one way to say true: True. There is one way to say false: False.\n\nIn JavaScript, this coerces to True:\n\n```javascript\nif (3) { ... }\n```\n\nIn Dart, that would blow up your program. Dart is, at its core, a productive, predictable, and simple language.\n\nThis is important, because writing an app in Flutter is simply writing Dart. Flutter is, underneath it all, a library of Dart classes. There is no markup language involved or JSX-style hybrid language. Every bit of front-end code is written in Dart. No HTML. No CSS.\n\n
Why does Flutter use Dart?
\n\nIf you're coming from literally any other background (and you're like me), you've probably complained about the fact that Flutter uses Dart, and not JavaScript. (Developers are, believe it or not, opinionated.)\n\nAnd there are reasons to be skeptical of this choice. It's not one of the hot languages of today. It's not even one of the top 25 most used languages. What gives? Is Google just using it because it's their language? I'd imagine that played a role, but there are practical reasons, too.\n\n* Dart supports both Just In Time (JIT) compiling and Ahead of Time (AOT) compiling.\n * The AOT compiler changes Dart into efficient native code. This makes Flutter fast (a win for the user and the developer), but it also means that almost all of the framework is written in Dart. For you, the developer, that means you customize everything.\n * Dart's optional JIT compiling allows hot-reloading to exist. Fast development and iteration is a key to the joy of using Flutter. When you save code in your text editor, your app is updated in your simulator in less than a second.\n* Dart is Object Oriented. This makes it easy to write visual user-experiences exclusively with Dart, with no need for a markup language.\n* Dart is a productive and predictable language. It's easy to learn and it feels familiar. Whether you come from a dynamic language or a static language, you can get up and running with ease.\n* And yes, I'd image that it is extremely appealing to use a language made by the same company, because the Flutter team could work closely with the Dart team to implement new needed features.\n\n
Flutter vs. React Native (and other options)
\n\nBefore I offer up my unsolicited opinions on your other options, I want to make this crystal clear: Flutter is not the answer 100% of the time. It's a tool and we should choose the right tool for the job at hand. That said, I'd only argue that it's something you should strongly consider in the future.\n\n
Native development (iOS and Android)
\n\nYour first choice is to write native apps for iOS and Android. This gives you maximum control, debugging tools, and (potentially) a very performant app. At a company, this likely means you have to write everything twice; once for each platform. You likely need different developers on different teams with different skillsets that can't easily help each other.\n\n
React Native, WebViews, and other cross-platform JavaScript options
\n\nYour second option: cross-platform, JavaScript-based tools such as WebViews and React Native. These aren't bad options. The problems you experience with native development disappear. Every front-end web developer on your team can chip in and help - all they need are some modern JavaScript skills. This is precisely why large companies such as AirBnb, Facebook, and Twitter have used React Native on core products. (AirBnb recently announced that it would stop using React Native, because of some of the issues I'll describe below.)\n\nThe first \"mobile apps\" to be built cross platform are simply WebViews that run on WebKit (a browser rendering engine). These are literally just embedded web pages. The problem with this is basically that manipulating the DOM is very expensive and doesn't perform well enough to make a great mobile experience.\n\nSome platforms have solved this problem by building the \"JavaScript bridge.\" This bridge lets JavaScript talk directly to native widgets.\n\nThis is much more performant than WebViews, because you eliminate the DOM from the equation, but it's still not ideal. Every time your app needs to talk directly to the rendering engine, it has to be compiled to native code to \"cross the bridge.\" On a single interaction, the bridge must be crossed twice: once from platform to app, and then back from app to platform.\n\n\n\nFlutter differs because it uses its own rendering engine, Skia, which is the same rendering engine used in Chrome. Skia can communicate with Flutter apps. As a result, Flutter accepts local events directly, rather than having to first compile them into JavaScript. This is essentially possible because Flutter compiles to native ARM code. This is the secret to its success. When your app is fired up on a user's device, it's entirely running in the language that the device's operating system expects.\n\n\n\nThe JavaScript bridge is a marvel of modern programming, to be sure, but it presents three big problems.\n\nThe first problem is that debugging is hard. When there's an error in the runtime compiler, that error has to be traced back across the JavaScript bridge and found in the JavaScript code. It may be in markup or CSS-like syntax as well. The debugger itself may not work as well as we'd like it to.\n\nA second bigger issue, though, is performance. The JavaScript bridge is very expensive. Every time something in the app is tapped, that event must be sent across the bridge to your JavaScript app. The result, for lack of better term, is jank.\n\nThe third big problem, according to AirBnb, is that they found themselves having to dip down into the native code more often than they wanted to, which was a problem for their teams comprised mostly of JavaScript developers. (The jury is still out on this issue with Flutter, but I can say that I've never once had to try and write native code at my job. Some members of my team have created plugins in Objective-C and Java.)\n\n
The immediate benefits of Flutter
\n\nIt's likely, since you're reading this article, that you're interested in Flutter... but you might be skeptical. I admire how thorough you are in vetting technology.\n\nYour reasons for being skeptical are fair. It's a new technology. That means breaking changes in the API. It means missing support for important features (such as Google Maps). It seems possible that Google could abandon it altogether one day.\n\nAnd, despite the fact that you believe Dart is great language, that doesn't change the fact that Dart isn't widely used, and many third-party libraries that you want may not exist.\n\nI would argue against all those points, though. The API unlikely to change, as the Google uses Flutter internally on major revenue-generating apps, including Google AdWords. Dart has recently moved into version 2, which means it will likely be a while until it changes much. It will likely be years until breaking changes are introduced which, in a computer world, is practically forever.\n\nYes, there are indeed missing features, but Flutter gives you the complete control to add your own native plugins. In fact, many of the most important operating system plugins already exist, such as a map plugin, camera, location services, and device storage. The Dart and Flutter ecosystem and community already exists. It's much smaller than the JavaScript community, of course, but I would argue that it's concise. I see people every day contributing to existing packages, rather than creating new ones.\n\nNow, let's talk about Flutter's specific benefits.\n\n
No JavaScript bridge
\n\nThis is a major bottleneck in development and in your application's performance. Again, it leads to jank. Scrolling isn't smooth, it's not always performant, and it's hard to debug.\n\nFlutter compiles to actual native code and is rendered using Skia. The app itself is running in native, so there's no reason to convert Dart to native. This means that it doesn't lose any of the performance or productivity when it's running on a user's device.\n\n
Compile time
\n\nIf you're coming from native development, one of your major pains is the development cycle. iOS is infamous for its insane compile times. In Flutter, a full compile generally takes less than 30 seconds, and incremental compiles are sub-seconds, thanks to hot-reload. At my day job, we develop features for our mobile client first because Flutter's development cycle allows us to move so quickly. Only when we're sure of our implementation do we go write those features in the web client.\n\n
Write once, test once, deploy everywhere
\n\nNot only do you get to write your app one time and deploy to iOS and Android, you also only have to write your tests once. Dart unit testing is quite easy, and Flutter includes a library for testing Widgets.\n\n
Code sharing
\n\nI'm going to be fair here: I suppose this is technically possible in JavaScript as well. But, it's certainly not possible in native development. With Flutter and Dart, your web and mobile apps can share all the code, except each client's views. (Of course, only if you're using Dart for your web apps.) You can quite easily use dependency injection to run an AngularDart app and Flutter app with the same models and controllers.\n\nAnd of course, even if you don't want to share code between your web app and your mobile app, you're sharing all your code between the iOS and Android apps.\n\nIn practical terms, this means that you are super productive. I mentioned that we develop our mobile features first at my day job. Because we share business logic between web and mobile, once the mobile feature is implemented, we only have to write views that expect that same controller data.\n\n
Productivity and collaboration
\n\nGone are the days of separate teams for iOS and Android. In fact, whether your use Dart or JavaScript in your web apps, Flutter development is familiar enough that all your teams will be unified. It's not a stretch by any means to expect a JavaScript web developer to also effectively develop in Flutter and Dart. If you believe me here, then it follows that your new unified team will be three times more productive.\n\n
Code maintenance
\n\nNothing is more satisfying then fixing a bug once and having it corrected on all your clients. Only in very specific cases is there a bug in a iOS app produced with Flutter that is not also in the Android version (and vice versa). In 100% of these cases, these bugs aren't bugs, but cosmetic issues because Flutter follows the device OS design systems in it's built-in widgets. Because these are issues like text sizing or alignment, they are trivial in the context of using engineering time to fix.\n\n
Flutter for JavaScript developers
\n\nSince you're reading CSS-Tricks, I'd be willing to bet you're a web developer. If you've used any of today's hottest frameworks (e.g. React, Angular, Vue, etc.), then you'll be happy to know that picking up Flutter is easy.\n\nFlutter is completely reactive, so the same mindset and paradigm that you're used to with React carries over to Flutter. You're essentially building a ton of small, reusable components (called Widgets in Flutter) just like React. These widgets are complete with lifecycle methods, and they're written in classes. If you've used this syntax in React:\n\n```javascript\nconst MyComponent extends React.Component {\n //...\n render(){}\n}\n```\n\n...then you'll pick up Flutter with no problem. This is how you do the same in Flutter:\n\n```dart\nclass MyWidget extends StatelessWidget {\n //...\n build(){}\n}\n```\n\nAnd, just like React, Flutter favors composition over inheritance. For example, if you want to make a special AddToCartButton in React, you'd build a button with special functions and styles in JSX. That's exactly how you do it in Flutter (minus the JSX).\n\nFinally, the layout system in Flutter is similar to CSS rules we're familiar with, like flexbox and absolute positioning.\n\nThis is also where a big difference in making views in Flutter comes in, though. In Flutter, literally everything is a Widget. There are some obvious, concrete Widgets, like Text, Button, and AppBar. But Animations and Layout declarations are also Widgets. To center text, you wrap a Text Widget in a Center Widget. To add padding, there's a Padding Widget.\n\nImagine breaking down a React app to the smallest possible reusable components you could make. For example, what if you made a higher-order React component that simply took a prop \"padding\" and all it did was add that amount of padding to whatever was nested within it. That's how Flutter works, because there is no CSS or markup.\n\nIn this sample picture, here are a few layout widgets that you might use, but you can't ‘see' as the user:\n\n\n\nThat may seem like a ton of monotonous work, but Flutter comes with many, many Widgets built right in (such as Padding and Center) so you don't have to waste time doing that yourself.\n\nThese are some of the most common widgets:\n\n
\n\nTL;DR: should you try Flutter?\n\nIf you want to make buttery smooth mobile apps in a familiar style, then yes! The performance and developer experience are both completely held in tact in Flutter. Its animations tick at 60fps, and it has a bundle of built-in Cupertino-style and Material Design-style Widgets. Or, long story short: it's incredible how quick you can be productive in Flutter, without sacrificing native performance.","updated_at":"Saturday, 18th of July, 2020","slug":"about-flutter","strapiId":9,"title":"About Flutter","tutorial":{"category":"Flutter","title":"Getting started with Flutter"}},"strapiTutorial":{"lessons":[{"author":1,"content":"The first step to using Flutter is installing the Flutter SDK, which will also install Dart. Follow this super in-depth guide to get started [Flutter.io Getting Started Guide](https://flutter.io).\n\n### Choose an Editor with Dart Plugins\n\nYou can use whichever text editor you'd like to write Dart code, but you'll have a much more productive experience if you choose an IDE with Flutter support.\n\n### 1. IntelliJ Idea\n\nI highly recommend [JetBrains Intellij IDEA](https://www.jetbrains.com/idea/). The community edition is free.\n\nThis IDE will give you all the nice features you'd want for any language: code completion, snippets, error highlighting, linting, etc. You'll also get killer debugging features. There's a browser-dev-tools style Inspector and more in the debug tools.\n\nIn order to use IntelliJ, you'll need to install the Dart and Flutter plugins within IntelliJ.\n\n\n\n### 2. VS Code\n\nThe Dart community has built a Dart plugin for VS code which has Flutter\nfeature support. It won't be as robust, but it's a fine alternative.\n\n* [VSCode](https://code.visualstudio.com/)\n* [Dart Plugin for VS Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)\n\n## Pub and Libraries\n\n`pub` is the Dart package management system. There's a website where can browse, search and get info about all the available packages for Dart and Flutter.\n\n[Dart Pub Packages](https://pub.dartlang.org/)\n\n## Gitter\n\nIf you run into any problems, you can ask for help in real time on the [Flutter Gitter Channel](https://gitter.im/flutter/flutter). There you'll find Flutter team members from Google as well as a supportive community of fans.\n\n## Flutter Docs\n\nFinally, I sincerely find Flutter's documentation is among the best I've come across: [Flutter Widget Docs](https://flutter.io/widgets/)\n","created_at":"2020-07-12T16:35:18.294Z","id":10,"slug":"id-es-and-resources","title":"IDEs and resources","tutorial":3,"updated_at":"2020-07-18T17:21:15.185Z"},{"author":1,"content":"
\nThis article was originally published on CSS Tricks. \nUpdated here on 12/2/2019\n
\n\nFlutter is a mobile SDK that, at its core, is about empowering everyone to build beautiful mobile apps. Whether you come from the world of web development or native mobile development, Flutter makes it easier to create mobile apps in a familiar, simplified way, without ever giving up control to the framework.\n\nAs of this writing, Google AdWords, Alibaba, and BMW (to name a few) are using Flutter in production. You can see more examples of who's using Flutter (including the app I've worked on) on Flutter's website on the showcase page.\n\nRight now, there's a lot of buzz about Flutter. The question I see most often is, \"Flutter or React Native...which one should I use?\" Like all things in programming, its all about the tradeoffs you're willing to make.\n\nI'm going to try to convince you that Flutter is the best option for mobile app development. I believe it's better than any other cross platform framework, and it's possibly better than native development - but more on that in a bit.\n\nBefore that though, let me walk (quickly) through what Flutter is, and what it is not, starting with the Dart programming language.\n\n
What's Dart?
\n\nDart is a programming language created by Google and was used to write Flutter. Dart was created, more or less, because Google wanted a language that was \"better\" than JavaScript to write server side and front-end code. From what I understand, the main issue they had with JavaScript is how slowly it updates with new features since it relies on a huge committee for approvals and several browser vendors to implement it.\n\nAfter a series of decisions about whether to take on JavaScript directly or not, Google decided to make a language that semantically fit inside of JavaScript. In other words, every single thing you write in Dart can compile to JavaScript. This is why they didn't just use Java - it's semantically huge.\n\n
\n\nThe fundamentals of Dart are similar to all high-level languages. That said, programming languages are, as it turns out, hard to learn.\n\nThere's good news, though. Dart excels at being a \"safe\" language to learn. Google didn't set out to create anything innovative with Dart. They were seeking to make a language that was simple, productive and could be compiled into JavaScript.\n\nThere is nothing particularly exciting about its syntax, and no special operators that will throw you through a loop. In Dart (unlike JavaScript), there is one way to say true: True. There is one way to say false: False.\n\nIn JavaScript, this coerces to True:\n\n```javascript\nif (3) { ... }\n```\n\nIn Dart, that would blow up your program. Dart is, at its core, a productive, predictable, and simple language.\n\nThis is important, because writing an app in Flutter is simply writing Dart. Flutter is, underneath it all, a library of Dart classes. There is no markup language involved or JSX-style hybrid language. Every bit of front-end code is written in Dart. No HTML. No CSS.\n\n
Why does Flutter use Dart?
\n\nIf you're coming from literally any other background (and you're like me), you've probably complained about the fact that Flutter uses Dart, and not JavaScript. (Developers are, believe it or not, opinionated.)\n\nAnd there are reasons to be skeptical of this choice. It's not one of the hot languages of today. It's not even one of the top 25 most used languages. What gives? Is Google just using it because it's their language? I'd imagine that played a role, but there are practical reasons, too.\n\n* Dart supports both Just In Time (JIT) compiling and Ahead of Time (AOT) compiling.\n * The AOT compiler changes Dart into efficient native code. This makes Flutter fast (a win for the user and the developer), but it also means that almost all of the framework is written in Dart. For you, the developer, that means you customize everything.\n * Dart's optional JIT compiling allows hot-reloading to exist. Fast development and iteration is a key to the joy of using Flutter. When you save code in your text editor, your app is updated in your simulator in less than a second.\n* Dart is Object Oriented. This makes it easy to write visual user-experiences exclusively with Dart, with no need for a markup language.\n* Dart is a productive and predictable language. It's easy to learn and it feels familiar. Whether you come from a dynamic language or a static language, you can get up and running with ease.\n* And yes, I'd image that it is extremely appealing to use a language made by the same company, because the Flutter team could work closely with the Dart team to implement new needed features.\n\n
Flutter vs. React Native (and other options)
\n\nBefore I offer up my unsolicited opinions on your other options, I want to make this crystal clear: Flutter is not the answer 100% of the time. It's a tool and we should choose the right tool for the job at hand. That said, I'd only argue that it's something you should strongly consider in the future.\n\n
Native development (iOS and Android)
\n\nYour first choice is to write native apps for iOS and Android. This gives you maximum control, debugging tools, and (potentially) a very performant app. At a company, this likely means you have to write everything twice; once for each platform. You likely need different developers on different teams with different skillsets that can't easily help each other.\n\n
React Native, WebViews, and other cross-platform JavaScript options
\n\nYour second option: cross-platform, JavaScript-based tools such as WebViews and React Native. These aren't bad options. The problems you experience with native development disappear. Every front-end web developer on your team can chip in and help - all they need are some modern JavaScript skills. This is precisely why large companies such as AirBnb, Facebook, and Twitter have used React Native on core products. (AirBnb recently announced that it would stop using React Native, because of some of the issues I'll describe below.)\n\nThe first \"mobile apps\" to be built cross platform are simply WebViews that run on WebKit (a browser rendering engine). These are literally just embedded web pages. The problem with this is basically that manipulating the DOM is very expensive and doesn't perform well enough to make a great mobile experience.\n\nSome platforms have solved this problem by building the \"JavaScript bridge.\" This bridge lets JavaScript talk directly to native widgets.\n\nThis is much more performant than WebViews, because you eliminate the DOM from the equation, but it's still not ideal. Every time your app needs to talk directly to the rendering engine, it has to be compiled to native code to \"cross the bridge.\" On a single interaction, the bridge must be crossed twice: once from platform to app, and then back from app to platform.\n\n\n\nFlutter differs because it uses its own rendering engine, Skia, which is the same rendering engine used in Chrome. Skia can communicate with Flutter apps. As a result, Flutter accepts local events directly, rather than having to first compile them into JavaScript. This is essentially possible because Flutter compiles to native ARM code. This is the secret to its success. When your app is fired up on a user's device, it's entirely running in the language that the device's operating system expects.\n\n\n\nThe JavaScript bridge is a marvel of modern programming, to be sure, but it presents three big problems.\n\nThe first problem is that debugging is hard. When there's an error in the runtime compiler, that error has to be traced back across the JavaScript bridge and found in the JavaScript code. It may be in markup or CSS-like syntax as well. The debugger itself may not work as well as we'd like it to.\n\nA second bigger issue, though, is performance. The JavaScript bridge is very expensive. Every time something in the app is tapped, that event must be sent across the bridge to your JavaScript app. The result, for lack of better term, is jank.\n\nThe third big problem, according to AirBnb, is that they found themselves having to dip down into the native code more often than they wanted to, which was a problem for their teams comprised mostly of JavaScript developers. (The jury is still out on this issue with Flutter, but I can say that I've never once had to try and write native code at my job. Some members of my team have created plugins in Objective-C and Java.)\n\n
The immediate benefits of Flutter
\n\nIt's likely, since you're reading this article, that you're interested in Flutter... but you might be skeptical. I admire how thorough you are in vetting technology.\n\nYour reasons for being skeptical are fair. It's a new technology. That means breaking changes in the API. It means missing support for important features (such as Google Maps). It seems possible that Google could abandon it altogether one day.\n\nAnd, despite the fact that you believe Dart is great language, that doesn't change the fact that Dart isn't widely used, and many third-party libraries that you want may not exist.\n\nI would argue against all those points, though. The API unlikely to change, as the Google uses Flutter internally on major revenue-generating apps, including Google AdWords. Dart has recently moved into version 2, which means it will likely be a while until it changes much. It will likely be years until breaking changes are introduced which, in a computer world, is practically forever.\n\nYes, there are indeed missing features, but Flutter gives you the complete control to add your own native plugins. In fact, many of the most important operating system plugins already exist, such as a map plugin, camera, location services, and device storage. The Dart and Flutter ecosystem and community already exists. It's much smaller than the JavaScript community, of course, but I would argue that it's concise. I see people every day contributing to existing packages, rather than creating new ones.\n\nNow, let's talk about Flutter's specific benefits.\n\n
No JavaScript bridge
\n\nThis is a major bottleneck in development and in your application's performance. Again, it leads to jank. Scrolling isn't smooth, it's not always performant, and it's hard to debug.\n\nFlutter compiles to actual native code and is rendered using Skia. The app itself is running in native, so there's no reason to convert Dart to native. This means that it doesn't lose any of the performance or productivity when it's running on a user's device.\n\n
Compile time
\n\nIf you're coming from native development, one of your major pains is the development cycle. iOS is infamous for its insane compile times. In Flutter, a full compile generally takes less than 30 seconds, and incremental compiles are sub-seconds, thanks to hot-reload. At my day job, we develop features for our mobile client first because Flutter's development cycle allows us to move so quickly. Only when we're sure of our implementation do we go write those features in the web client.\n\n
Write once, test once, deploy everywhere
\n\nNot only do you get to write your app one time and deploy to iOS and Android, you also only have to write your tests once. Dart unit testing is quite easy, and Flutter includes a library for testing Widgets.\n\n
Code sharing
\n\nI'm going to be fair here: I suppose this is technically possible in JavaScript as well. But, it's certainly not possible in native development. With Flutter and Dart, your web and mobile apps can share all the code, except each client's views. (Of course, only if you're using Dart for your web apps.) You can quite easily use dependency injection to run an AngularDart app and Flutter app with the same models and controllers.\n\nAnd of course, even if you don't want to share code between your web app and your mobile app, you're sharing all your code between the iOS and Android apps.\n\nIn practical terms, this means that you are super productive. I mentioned that we develop our mobile features first at my day job. Because we share business logic between web and mobile, once the mobile feature is implemented, we only have to write views that expect that same controller data.\n\n
Productivity and collaboration
\n\nGone are the days of separate teams for iOS and Android. In fact, whether your use Dart or JavaScript in your web apps, Flutter development is familiar enough that all your teams will be unified. It's not a stretch by any means to expect a JavaScript web developer to also effectively develop in Flutter and Dart. If you believe me here, then it follows that your new unified team will be three times more productive.\n\n
Code maintenance
\n\nNothing is more satisfying then fixing a bug once and having it corrected on all your clients. Only in very specific cases is there a bug in a iOS app produced with Flutter that is not also in the Android version (and vice versa). In 100% of these cases, these bugs aren't bugs, but cosmetic issues because Flutter follows the device OS design systems in it's built-in widgets. Because these are issues like text sizing or alignment, they are trivial in the context of using engineering time to fix.\n\n
Flutter for JavaScript developers
\n\nSince you're reading CSS-Tricks, I'd be willing to bet you're a web developer. If you've used any of today's hottest frameworks (e.g. React, Angular, Vue, etc.), then you'll be happy to know that picking up Flutter is easy.\n\nFlutter is completely reactive, so the same mindset and paradigm that you're used to with React carries over to Flutter. You're essentially building a ton of small, reusable components (called Widgets in Flutter) just like React. These widgets are complete with lifecycle methods, and they're written in classes. If you've used this syntax in React:\n\n```javascript\nconst MyComponent extends React.Component {\n //...\n render(){}\n}\n```\n\n...then you'll pick up Flutter with no problem. This is how you do the same in Flutter:\n\n```dart\nclass MyWidget extends StatelessWidget {\n //...\n build(){}\n}\n```\n\nAnd, just like React, Flutter favors composition over inheritance. For example, if you want to make a special AddToCartButton in React, you'd build a button with special functions and styles in JSX. That's exactly how you do it in Flutter (minus the JSX).\n\nFinally, the layout system in Flutter is similar to CSS rules we're familiar with, like flexbox and absolute positioning.\n\nThis is also where a big difference in making views in Flutter comes in, though. In Flutter, literally everything is a Widget. There are some obvious, concrete Widgets, like Text, Button, and AppBar. But Animations and Layout declarations are also Widgets. To center text, you wrap a Text Widget in a Center Widget. To add padding, there's a Padding Widget.\n\nImagine breaking down a React app to the smallest possible reusable components you could make. For example, what if you made a higher-order React component that simply took a prop \"padding\" and all it did was add that amount of padding to whatever was nested within it. That's how Flutter works, because there is no CSS or markup.\n\nIn this sample picture, here are a few layout widgets that you might use, but you can't ‘see' as the user:\n\n\n\nThat may seem like a ton of monotonous work, but Flutter comes with many, many Widgets built right in (such as Padding and Center) so you don't have to waste time doing that yourself.\n\nThese are some of the most common widgets:\n\n
\n\nTL;DR: should you try Flutter?\n\nIf you want to make buttery smooth mobile apps in a familiar style, then yes! The performance and developer experience are both completely held in tact in Flutter. Its animations tick at 60fps, and it has a bundle of built-in Cupertino-style and Material Design-style Widgets. Or, long story short: it's incredible how quick you can be productive in Flutter, without sacrificing native performance.","created_at":"2020-07-12T16:34:48.933Z","id":9,"slug":"about-flutter","title":"About Flutter","tutorial":3,"updated_at":"2020-07-18T17:21:15.185Z"}]},"strapiTableOfContents":{"contents":"{\n \"Dart\": {\n \"Getting Started with Dart\": [\n \"About Dart\",\n \"Install Dart on your machine\",\n \"Dartpad\",\n \"Text Editors: Intellij and VSCode\",\n \"Resources: Documentation and Pub.dev\",\n \"Hello World\",\n \"The main function\",\n \"Print to the console\"\n ],\n \"Dart Fundamentals\": [\n \"Values and variables\",\n \"Comments\",\n \"const and final variables\",\n \"Arithmetic and Comparison Operators\",\n \"Assignment Operators\",\n \"Logical Operators\",\n \"Null Aware Operators\",\n \"Type Test Operators\",\n \"Bitwise and Shift Operators\",\n \"Control Flow: if, else, else if\",\n \"Switch statements and case\",\n \"Ternary Conditional operator\",\n \"Loops: for and while\",\n \"Anatomy of Dart Functions\",\n \"Arrow functions\",\n \"Function arguments: default, optional, named\",\n \"Lexical Scope\",\n \"Cascade notation\"\n ],\n \"Data Types\": [\n \"Intro to Dart's Type System\",\n \"Numbers\",\n \"Strings\",\n \"Booleans\",\n \"dynamic\",\n \"lists\",\n \"sets\",\n \"maps\"\n ],\n \"Object-Oriented Programming\": [\n \"Intro to OOP\",\n \"Classes\",\n \"Constructors\",\n \"Properties and methods\",\n \"Methods: static, private, etc\",\n \"Getters and setters\",\n \"Extending classes (inheritance)\",\n \"Initializer lists and final properties\",\n \"Factory methods\",\n \"Singletons\",\n \"Abstract classes (and interfaces)\",\n \"Mixins\",\n \"Extension methods\"\n ],\n \"Iterables, Iterators, and Collections\": [\n \"What are collections (and iterables)?\",\n \"Looping: for-in and forEach\",\n \"Reading elements pt 1: first, last\",\n \"Adding elements: add and insert (all)\",\n \"Checking for elements: contains, indexOf, any, every\",\n \"Removing elements: remove, clear, removeWhere\",\n \"Filtering elements: where, takeWhile, and skipWhile\",\n \"Changing elements: map and expand\",\n \"Deriving values from elements: fold, reduce, join\",\n \"Type casting collections: cast, as, retype, toSet, toList\",\n \"Iterators: understanding and creating your own\",\n \"Iterable-like methods on maps (and putIfAbsent)\"\n ]\n },\n \"Flutter\": {\n \"Getting started with Flutter\": [\n \"About Flutter\",\n \"IDEs and resources\"\n ],\n \"Widgets\": [\n \"Intro to Widgets\",\n \"Widget types: Stateful and Stateless\",\n \"StatefulWidget lifecycle\",\n \"The Widget tree\",\n \"BuildContext\",\n \"Inherited Widgets\",\n \"Thinking in widgets\"\n ],\n \"Intro Flutter App\": [\n \"Intro and Setup\",\n \"Data Model and HTTP\",\n \"Build a custom widget\",\n \"ListView and builder pattern\",\n \"Gradient Backgrounds\",\n \"Routing: Add a detail page\",\n \"Routing 2: Add a form page\",\n \"User Input\",\n \"Sliders and Buttons\",\n \"Snackbars and Dialogs\",\n \"Built-in Animation: AnimatedCrossFade\",\n \"Built-in Animation: Hero transition\"\n ],\n \"Custom Animation: Progress Indicator\": [\n \"Intro and Overview\",\n \"Build the example app boiler-plate\",\n \"Custom Widget: Peg\",\n \"Tween and AnimationController classes\",\n \"Tween by example\",\n \"Using Tweens and Intervals\",\n \"Wrap the Pegs in AnimatedWidgets\",\n \"Bring it all together\"\n ],\n \"State Management: Blocs without Libraries\": [\n \"What are blocs?\",\n \"Calendar App introduction\",\n \"Create bloc one\",\n \"Create a bloc provider\",\n \"Using StreamBuilders with blocs\",\n \"Create bloc two: Add/Edit Tasks\",\n \"Consume the second bloc's streams\",\n \"Complete source code\"\n ],\n \"State Management: Provider\": [\n \"What is Provider?\",\n \"The most basic example using Provider\",\n \"ChangeNotifierProvider\",\n \"Rebuilding widgets with Consumer\",\n \"Finer build control with Selector\",\n \"Future Provider\",\n \"MultiProvider micro lesson\",\n \"Stream Provider\",\n \"Using context extensions for more control\",\n \"ProxyProvider\",\n \"Using .value constructors\",\n \"The final example (A shopping cart app)\",\n \"For the curious: How is provider implemented\"\n ],\n \"Handling Data with Brick: Offline First with Rest\": [\n \"About Brick and setup\",\n \"Adding a Repository\",\n \"Adding a Model\",\n \"Generating Code\",\n \"Rendering Models\",\n \"Adding an Association\"\n ]\n }\n}"}},"pageContext":{"slug":"about-flutter","tutorialTitle":"Getting started with Flutter","previous":{"author":1,"content":"The first step to using Flutter is installing the Flutter SDK, which will also install Dart. Follow this super in-depth guide to get started [Flutter.io Getting Started Guide](https://flutter.io).\n\n### Choose an Editor with Dart Plugins\n\nYou can use whichever text editor you'd like to write Dart code, but you'll have a much more productive experience if you choose an IDE with Flutter support.\n\n### 1. IntelliJ Idea\n\nI highly recommend [JetBrains Intellij IDEA](https://www.jetbrains.com/idea/). The community edition is free.\n\nThis IDE will give you all the nice features you'd want for any language: code completion, snippets, error highlighting, linting, etc. You'll also get killer debugging features. There's a browser-dev-tools style Inspector and more in the debug tools.\n\nIn order to use IntelliJ, you'll need to install the Dart and Flutter plugins within IntelliJ.\n\n\n\n### 2. VS Code\n\nThe Dart community has built a Dart plugin for VS code which has Flutter\nfeature support. It won't be as robust, but it's a fine alternative.\n\n* [VSCode](https://code.visualstudio.com/)\n* [Dart Plugin for VS Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)\n\n## Pub and Libraries\n\n`pub` is the Dart package management system. There's a website where can browse, search and get info about all the available packages for Dart and Flutter.\n\n[Dart Pub Packages](https://pub.dartlang.org/)\n\n## Gitter\n\nIf you run into any problems, you can ask for help in real time on the [Flutter Gitter Channel](https://gitter.im/flutter/flutter). There you'll find Flutter team members from Google as well as a supportive community of fans.\n\n## Flutter Docs\n\nFinally, I sincerely find Flutter's documentation is among the best I've come across: [Flutter Widget Docs](https://flutter.io/widgets/)\n","created_at":"2020-07-12T16:35:18.294Z","id":10,"slug":"id-es-and-resources","title":"IDEs and resources","tutorial":3,"updated_at":"2020-07-18T17:21:15.185Z"},"next":null}},"staticQueryHashes":["2185715291","3564968493","63159454"]}
![\"\"](\"https://css-tricks.com/wp-content/uploads/2018/08/flutter-01.png\")
![\"\"](\"https://css-tricks.com/wp-content/uploads/2018/08/flutter-02.png\")
![\"\"](\"https://css-tricks.com/wp-content/uploads/2018/08/flutter-03.jpg\")