Saturday, July 25, 2020

Building your Flutter App on Travis CI

It is simple to configure Travis CI Building your Flutter Application on Travis CI. All you have to do is add a build manifest file named .travis.yml which includes the build server instructions. 

Travis CI Yaml Configuration
See Travis CI yaml reference for more options. In the .travis.yml build instructions 3 steps are needed to build a flutter application. 
  1. Use a dart Docker container, "language: dart"
  2. Download Flutter, "git clone ..."
  3. Export the Flutter binary path, "export PATH..."
Example .travis.yml configuration
In this example flutter beta branch is used along with the web configuration.

# File: .travis.yml
# Reference:
language: dart
  - stable

  - echo "Configure Flutter"
  - git clone -b beta
  - export PATH="$PATH:`pwd`/flutter/bin"
  - flutter upgrade
  - flutter config --enable-web
  - flutter doctor

  - flutter build web

Example Project
Check out an example project config here which uses Travis CI to build the Flutter web app. 

Saturday, July 18, 2020

Build a simple Flutter loading animation

In this example the Flutter animation controller is used to count between zero and three. The IntTween class is bound to the animated controller so the count up or down based on the the animation direction. Then the animation count is used to display the periods in the loading display. 

Configure the Animation Counter
The animation controller is easy to configure. 

1. Add the mixin SingleTickerProviderStateMixin

class _LoadingState extends State<Loading%gt; 
	with SingleTickerProviderStateMixin { //... }
2. Initialize the animation controller and counter
void initState() {
  _controller =
      AnimationController(vsync: this, duration: Duration(seconds: 1));
  _animation = IntTween(begin: 0, end: totalPeriodCount).animate(_controller)
    ..addStatusListener((state) {
      if (state == AnimationStatus.completed) {
        // NOTE: Change the animation counter direction
      } else if (state == AnimationStatus.dismissed) {
        // NOTE: Change the animation counter direction
    ..addListener(() {
      // NOTE: Update the view
      setState(() {});
Controlling the Animation Notes:
  • Use _controller.reverse() to reverse the animation counter. 
  • Use _controller.forward() to advance the animation counter. 
  • And be sure to update the views state using setState((){}) so the view is updated.

3. Use the animation counter. Use _animation.value to reference the value for displays frame. 

int visiblePeriodCount = totalPeriodCount - _animation.value;
4. Tear down the animation controller
void dispose() {

Try it out
Putting it all together, try out this animation example in the DartPad:

This example shows how easy it is to use the animations in Flutter. The simplicity the Flutter animation controller makes it easy to build beautiful application animations that bring a lot of joy to application usage. 

I hope you enjoyed this small tutorial. I'd love to hear what you used the animation controller. Please share your tips and tricks below. 

Tuesday, July 7, 2020

Generating a Site for Documentation

Have you been looking for an easy way to generate a site for documentation? Where you don't have to do all the web foundation work to make it look and work great. I found Hugo to be an awesome tool to do just that. 

What is Hugo?
"Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again."

  • Really fast build times
  • Multi-language support, multilingual and i18n
  • Markdown support with shortcodes
  • Flexible content management system (CMS)
  • Hundreds of themes to choose from
  • More...
Generate and Run a Docsy Site

1. Install
2. Download
Download the Docsy example. Git is used to download the example.
git clone --recurse-submodules --depth 1
3. Run the Web Server
cd docsy-example
hugo server 
4. Load the Docsy Site

The link will be in the output and will look like http://localhost:1313. 

Find out more about what Hugo can do for your site.

Trying out the Dart Analysis Server

I wanted to see how the Dart Analysis Server was put together and worked. I started looking to see how I could wire it up and try out the co...