01-16-2020, 12:08 PM
Develop GUI apps using Flutter on Fedora
<div><p>When it comes to app development frameworks, Flutter is the latest and greatest. Google seems to be planning to take over the entire GUI app development world with Flutter, starting with mobile devices, which are already perfectly supported. Flutter allows you to develop cross-platform GUI apps for multiple targets — mobile, web, and desktop — from a single codebase.</p>
<p>This post will go through how to install the Flutter SDK and tools on Fedora, as well as how to use them both for mobile development and web/desktop development.</p>
<p> <span id="more-30046"></span> </p>
<h2>Installing Flutter and Android SDKs on Fedora</h2>
<p>To get started building apps with Flutter, you need to install</p>
<ul>
<li>the Android SDK;</li>
<li>the Flutter SDK itself; and,</li>
<li>optionally, an IDE and its Flutter plugins.</li>
</ul>
<h3>Installing the Android SDK</h3>
<p>Flutter requires the installation of the Android SDK with the entire <a href="https://developer.android.com/studio">Android Studio</a> suite of tools. Google provides a <em>tar.gz</em> archive. The Android Studio executable can be found in the <em>android-studio/bin</em> directory and is called <em>studio.sh</em>. To run it, open a terminal, <em>cd</em> into the aforementioned directory, and then run:</p>
<pre class="wp-block-preformatted">$ ./studio.sh</pre>
<h3>Installing the Flutter SDK</h3>
<p>Before you install Flutter you may want to consider what release channel you want to be on.</p>
<p>The <em>stable</em> channel is least likely to give you a headache if you just want to build a mobile app using mainstream Flutter features.</p>
<p>On the other hand, you may want to use the latest features, especially for desktop and web app development. In that case, you might be better off installing either the latest version of the <em>beta</em> or even the <em>dev</em> channel.</p>
<p>Either way, you can switch between channels after you install using the <em>flutter channel </em>command explained later in the article.</p>
<p>Head over to the <a href="https://flutter.dev/docs/development/tools/sdk/releases?tab=linux">official SDK archive page</a> and download the latest installation bundle for the release channel most appropriate for your use case.</p>
<p>The installation bundle is simply a <em>xz-</em>compressed tarball (<em>.tar.xz</em> extension). You can extract it wherever you want, given that you add the <em>flutter/bin</em> subdirectory to the <em>PATH</em> environment variable.</p>
<h3>Installing the IDE plugins</h3>
<p>To install the plugin for <a href="https://fedoramagazine.org/using-visual-studio-code-fedora/">Visual Studio Code</a>, you need to search for <em>Flutter</em> in the <em>Extensions</em> tab. Installing it will also install the <em>Dart</em> plugin.</p>
<p>The same will happen when you install the plugin for Android Studio by opening the <em>Settings</em>, then the <em>Plugins</em> tab and installing the <em>Flutter</em> plugin.</p>
<h2>Using the Flutter and Android CLI Tools on Fedora</h2>
<p>Now that you’ve installed Flutter, here’s how to use the CLI tool.</p>
<h3>Upgrading and Maintaining Your Flutter Installations</h3>
<p>The <em>flutter doctor</em> command is used to check whether your installation and related tools are complete and don’t require any further action.</p>
<p>For example, the output you may get from <em>flutter doctor</em> right after installing on Fedora is:</p>
<pre class="wp-block-preformatted">Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Linux, locale it_IT.UTF-8) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.2) ✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [!] Android Studio (version 3.5) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] Connected device ! No devices available ! Doctor found issues in 3 categories.</pre>
<p>Of course the issue with the Android toolchain has to be resolved in order to build for Android. Run this command to accept the licenses:</p>
<pre class="wp-block-preformatted">$ flutter doctor --android-licenses</pre>
<p>Use the <em>flutter channel</em> command to switch channels after installation. It’s just like switching branches on Git (and that’s actually what it does). You use it in the following way:</p>
<pre class="wp-block-preformatted">$ flutter channel <channel_name></pre>
<p>…where you’d replace <em><channel_name></em> with the release channel you want to switch to.</p>
<p>After doing that, or whenever you feel the need to do it, you need to update your installation. You might consider running this every once in a while or when a major update comes out if you follow Flutter news. Run this command:</p>
<pre class="wp-block-preformatted">$ flutter upgrade</pre>
<h3>Building for Mobile</h3>
<p>You can build for Android very easily: the <em>flutter build </em>command supports it by default, and it allows you to build both APKs and newfangled app bundles.</p>
<p>All you need to do is to create a project with <em>flutter create</em>, which will generate some code for an example app and the necessary <em>android</em> and <em>ios</em> folders.</p>
<p>When you’re done coding you can either run:</p>
<ul>
<li><em>flutter build apk</em> or <em>flutter build appbundle</em> to generate the necessary app files to distribute, or</li>
<li><em>flutter run</em> to run the app on a connected device or emulator directly.</li>
</ul>
<p>When you run the app on a phone or emulator with <em>flutter run</em>, you can use the <em>R</em> button on the keyboard to use <em>stateful hot reload</em>. This feature updates what’s displayed on the phone or emulator to reflect the changes you’ve made to the code without requiring a full rebuild.</p>
<p>If you input a capital <em>R</em> character to the debug console, you trigger a <em>hot restart</em>. This restart doesn’t preserve state and is necessary for bigger changes to the app.</p>
<p>If you’re using a GUI IDE, you can trigger a hot reload using the <em>bolt</em> icon button and a hot restart with the typical <em>refresh </em>button.</p>
<h3>Building for the Desktop</h3>
<p>To build apps for the desktop on Fedora, use the <a rel="noreferrer noopener" aria-label="flutter-desktop-embedding (opens in a new tab)" href="https://github.com/google/flutter-desktop-embedding" target="_blank">flutter-desktop-embedding</a> repository. The <em>flutter create </em>command doesn’t have templates for desktop Linux apps yet. That repository contains examples of desktop apps and files required to build on desktop, as well as examples of plugins for desktop apps.</p>
<p>To build or run apps for Linux, you also need to be on the <em>master</em> release channel and enable Linux desktop app development. To do this, run:</p>
<pre class="wp-block-preformatted">$ flutter config --enable-linux-desktop</pre>
<p>After that, you can use <em>flutter run</em> to run the app on your development workstation directly, or run <em>flutter build linux</em> to build a binary file in the <em>build/</em> directory.</p>
<p>If those commands don’t work, run this command in the project directory to generate the required files to build in the <em>linux/</em> directory:</p>
<pre class="wp-block-preformatted">$ flutter create .</pre>
<h3>Building for the Web</h3>
<p>Starting with Flutter 1.12, you can build Web apps using Flutter with the mainline codebase, without having to use the <em>flutter_web </em>forked libraries, but you have to be running on the <em>beta</em> channel.</p>
<p>If you are (you can switch to it using <em>flutter channel beta</em> and <em>flutter upgrade</em> as we’ve seen earlier), you need to enable web development by running <em>flutter config –enable-web</em>.</p>
<p>After doing that, you can run <em>flutter run -d web</em> and a local web server will be started from which you can access your app. The command returns the URL at which the server is listening, including the port number.</p>
<p>You can also run <em>flutter build web</em> to build the static website files in the <em>build/</em> directory.</p>
<p>If those commands don’t work, run this command in the project directory to generate the required files to build in the <em>web/</em> directory:</p>
<pre class="wp-block-preformatted">$ flutter create .</pre>
<h2>Packages for Installing Flutter</h2>
<p>Other distributions have packages or community repositories to install and update in a more straightforward and intuitive way. However, at the time of writing, no such thing exists for Flutter. If you have experience packaging RPMs for Fedora, consider contributing to <a href="https://github.com/carzacc/flutter-copr">this GitHub repository</a> for <a href="https://copr.fedorainfracloud.org/coprs/carzacc/flutter/">this COPR package</a>.</p>
<p>The next step is learning Flutter. You can do that in a number of ways:</p>
<ul>
<li>Read the good API reference documentation on the official site</li>
<li>Watching some of the introductory video courses available online</li>
<li>Read one of the many books out there today. <em>[Check out the author’s bio for a suggestion! — Ed.]</em></li>
</ul>
<hr class="wp-block-separator" />
<p><em>Photo by <a href="https://unsplash.com/@ruizra?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Randall Ruiz</a> on <a href="https://unsplash.com/s/photos/flutter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</em></p>
</div>
https://www.sickgaming.net/blog/2020/01/...on-fedora/
<div><p>When it comes to app development frameworks, Flutter is the latest and greatest. Google seems to be planning to take over the entire GUI app development world with Flutter, starting with mobile devices, which are already perfectly supported. Flutter allows you to develop cross-platform GUI apps for multiple targets — mobile, web, and desktop — from a single codebase.</p>
<p>This post will go through how to install the Flutter SDK and tools on Fedora, as well as how to use them both for mobile development and web/desktop development.</p>
<p> <span id="more-30046"></span> </p>
<h2>Installing Flutter and Android SDKs on Fedora</h2>
<p>To get started building apps with Flutter, you need to install</p>
<ul>
<li>the Android SDK;</li>
<li>the Flutter SDK itself; and,</li>
<li>optionally, an IDE and its Flutter plugins.</li>
</ul>
<h3>Installing the Android SDK</h3>
<p>Flutter requires the installation of the Android SDK with the entire <a href="https://developer.android.com/studio">Android Studio</a> suite of tools. Google provides a <em>tar.gz</em> archive. The Android Studio executable can be found in the <em>android-studio/bin</em> directory and is called <em>studio.sh</em>. To run it, open a terminal, <em>cd</em> into the aforementioned directory, and then run:</p>
<pre class="wp-block-preformatted">$ ./studio.sh</pre>
<h3>Installing the Flutter SDK</h3>
<p>Before you install Flutter you may want to consider what release channel you want to be on.</p>
<p>The <em>stable</em> channel is least likely to give you a headache if you just want to build a mobile app using mainstream Flutter features.</p>
<p>On the other hand, you may want to use the latest features, especially for desktop and web app development. In that case, you might be better off installing either the latest version of the <em>beta</em> or even the <em>dev</em> channel.</p>
<p>Either way, you can switch between channels after you install using the <em>flutter channel </em>command explained later in the article.</p>
<p>Head over to the <a href="https://flutter.dev/docs/development/tools/sdk/releases?tab=linux">official SDK archive page</a> and download the latest installation bundle for the release channel most appropriate for your use case.</p>
<p>The installation bundle is simply a <em>xz-</em>compressed tarball (<em>.tar.xz</em> extension). You can extract it wherever you want, given that you add the <em>flutter/bin</em> subdirectory to the <em>PATH</em> environment variable.</p>
<h3>Installing the IDE plugins</h3>
<p>To install the plugin for <a href="https://fedoramagazine.org/using-visual-studio-code-fedora/">Visual Studio Code</a>, you need to search for <em>Flutter</em> in the <em>Extensions</em> tab. Installing it will also install the <em>Dart</em> plugin.</p>
<p>The same will happen when you install the plugin for Android Studio by opening the <em>Settings</em>, then the <em>Plugins</em> tab and installing the <em>Flutter</em> plugin.</p>
<h2>Using the Flutter and Android CLI Tools on Fedora</h2>
<p>Now that you’ve installed Flutter, here’s how to use the CLI tool.</p>
<h3>Upgrading and Maintaining Your Flutter Installations</h3>
<p>The <em>flutter doctor</em> command is used to check whether your installation and related tools are complete and don’t require any further action.</p>
<p>For example, the output you may get from <em>flutter doctor</em> right after installing on Fedora is:</p>
<pre class="wp-block-preformatted">Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Linux, locale it_IT.UTF-8) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.2) ✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [!] Android Studio (version 3.5) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] Connected device ! No devices available ! Doctor found issues in 3 categories.</pre>
<p>Of course the issue with the Android toolchain has to be resolved in order to build for Android. Run this command to accept the licenses:</p>
<pre class="wp-block-preformatted">$ flutter doctor --android-licenses</pre>
<p>Use the <em>flutter channel</em> command to switch channels after installation. It’s just like switching branches on Git (and that’s actually what it does). You use it in the following way:</p>
<pre class="wp-block-preformatted">$ flutter channel <channel_name></pre>
<p>…where you’d replace <em><channel_name></em> with the release channel you want to switch to.</p>
<p>After doing that, or whenever you feel the need to do it, you need to update your installation. You might consider running this every once in a while or when a major update comes out if you follow Flutter news. Run this command:</p>
<pre class="wp-block-preformatted">$ flutter upgrade</pre>
<h3>Building for Mobile</h3>
<p>You can build for Android very easily: the <em>flutter build </em>command supports it by default, and it allows you to build both APKs and newfangled app bundles.</p>
<p>All you need to do is to create a project with <em>flutter create</em>, which will generate some code for an example app and the necessary <em>android</em> and <em>ios</em> folders.</p>
<p>When you’re done coding you can either run:</p>
<ul>
<li><em>flutter build apk</em> or <em>flutter build appbundle</em> to generate the necessary app files to distribute, or</li>
<li><em>flutter run</em> to run the app on a connected device or emulator directly.</li>
</ul>
<p>When you run the app on a phone or emulator with <em>flutter run</em>, you can use the <em>R</em> button on the keyboard to use <em>stateful hot reload</em>. This feature updates what’s displayed on the phone or emulator to reflect the changes you’ve made to the code without requiring a full rebuild.</p>
<p>If you input a capital <em>R</em> character to the debug console, you trigger a <em>hot restart</em>. This restart doesn’t preserve state and is necessary for bigger changes to the app.</p>
<p>If you’re using a GUI IDE, you can trigger a hot reload using the <em>bolt</em> icon button and a hot restart with the typical <em>refresh </em>button.</p>
<h3>Building for the Desktop</h3>
<p>To build apps for the desktop on Fedora, use the <a rel="noreferrer noopener" aria-label="flutter-desktop-embedding (opens in a new tab)" href="https://github.com/google/flutter-desktop-embedding" target="_blank">flutter-desktop-embedding</a> repository. The <em>flutter create </em>command doesn’t have templates for desktop Linux apps yet. That repository contains examples of desktop apps and files required to build on desktop, as well as examples of plugins for desktop apps.</p>
<p>To build or run apps for Linux, you also need to be on the <em>master</em> release channel and enable Linux desktop app development. To do this, run:</p>
<pre class="wp-block-preformatted">$ flutter config --enable-linux-desktop</pre>
<p>After that, you can use <em>flutter run</em> to run the app on your development workstation directly, or run <em>flutter build linux</em> to build a binary file in the <em>build/</em> directory.</p>
<p>If those commands don’t work, run this command in the project directory to generate the required files to build in the <em>linux/</em> directory:</p>
<pre class="wp-block-preformatted">$ flutter create .</pre>
<h3>Building for the Web</h3>
<p>Starting with Flutter 1.12, you can build Web apps using Flutter with the mainline codebase, without having to use the <em>flutter_web </em>forked libraries, but you have to be running on the <em>beta</em> channel.</p>
<p>If you are (you can switch to it using <em>flutter channel beta</em> and <em>flutter upgrade</em> as we’ve seen earlier), you need to enable web development by running <em>flutter config –enable-web</em>.</p>
<p>After doing that, you can run <em>flutter run -d web</em> and a local web server will be started from which you can access your app. The command returns the URL at which the server is listening, including the port number.</p>
<p>You can also run <em>flutter build web</em> to build the static website files in the <em>build/</em> directory.</p>
<p>If those commands don’t work, run this command in the project directory to generate the required files to build in the <em>web/</em> directory:</p>
<pre class="wp-block-preformatted">$ flutter create .</pre>
<h2>Packages for Installing Flutter</h2>
<p>Other distributions have packages or community repositories to install and update in a more straightforward and intuitive way. However, at the time of writing, no such thing exists for Flutter. If you have experience packaging RPMs for Fedora, consider contributing to <a href="https://github.com/carzacc/flutter-copr">this GitHub repository</a> for <a href="https://copr.fedorainfracloud.org/coprs/carzacc/flutter/">this COPR package</a>.</p>
<p>The next step is learning Flutter. You can do that in a number of ways:</p>
<ul>
<li>Read the good API reference documentation on the official site</li>
<li>Watching some of the introductory video courses available online</li>
<li>Read one of the many books out there today. <em>[Check out the author’s bio for a suggestion! — Ed.]</em></li>
</ul>
<hr class="wp-block-separator" />
<p><em>Photo by <a href="https://unsplash.com/@ruizra?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Randall Ruiz</a> on <a href="https://unsplash.com/s/photos/flutter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</em></p>
</div>
https://www.sickgaming.net/blog/2020/01/...on-fedora/