TagFlutter

Introducing the FlutterDoc publication

I

Flutter is a UI framework from Google that can be used to build native experiences that works across popular platforms. When I first discovered Flutter last year I decided to take a bit of a look into it. Now, to be honest, I’ve always been skeptical of frameworks that off cross-platform support —unfortunately I feel like that is a common theme amongst developers, which I am myself guilty of. But...

Animating App Bars in Flutter

A

Several months ago I played around with animating app bars in Flutter using the SliverAppBar Widget — this is a really great way of adding a nice touch to your flutter screens that are making use of the AppBar widget. For that reason, I thought I’d put together this post in the hope it will help you get this nicety into your Flutter apps! Let’s begin by clarifying what I mean by this, here is one...

Insetting FABs within the BottomAppBar

I

On Android we recently saw the introduction and use of the Bottom App Bar which also allows you to add a ‘notch’ when a floating action button component is to be inset into the view. I quite like the look of this component and wanted to make use of it within a Flutter side-project I’m currently working on. I originally thought that I’d have to make this view component myself as it still seems...

Widgets: TabBar

W

The TabBar widget can be used to display a collection of tabs to the user in a horizontal format. The user would then select the desired tab, which would then change the content being displayed on the screen to match the currently selected tab. It is likely that you have already used tabs in an application on your device, but for example we could have a tabs that allow the user to switch between...

Widgets: Hero

W

The Hero widget allows us to define that two widgets are related, allowing the system to automatically perform transitional animations for us as we navigate between screens. This allows us to provide a greater experience when transporting users through navigational context, making our app both easier and more pleasant to use. As displayed in the example above — we have one screen that displays a...

Widgets: Raised Button

W

The RaisedButton widget allows us to create a Button that matches the specification defined in the Material Guidelines here. The RaisedButton has a single constructor that allows us to instantiate the widget with a number of different properties. new RaisedButton( child: const Text('Connect with Twitter'), color: Theme.of(context).accentColor, elevation: 4.0, splashColor: Colors.blueGrey...

Widgets: Image

W

The Image widget allows us to display an image within our user interface via a number of different means. This is done via the use of several different constructors, we can do this by using: Image() — Used to load an image from an ImageProvider. Here we simply provide an ImageProvider instance for the image parameter for the image we wish to display. Image.asset() — Used to load an ImageStream...

Widgets: Column

W

A Column is a widget used to display child widgets in a vertical manner. When children are placed within the Column then the widget will not allow scroll features to view all children — it will simply display the children that are visible within view. For example, if we wished to display three text widgets within a column we can create a Column widget like below: new Column( children:...

Widgets: Row

W

A Row is a widget used to display child widgets in a horizontal manner. When children are placed within the Row then the widget will not allow scroll features to view all children — it will simply display the children that are visible within view. For example, if we wished to display three text widgets within a row we can create a Row widget like below: new Row( children: <Widget>[ new...

Widgets: Container

W

  The Container widget is used to contain child widgets whilst also providing the ability to apply some basic styling properties on itself to be applied when laid out on screen. If the container has no children then it will automatically fill the given area on the screen (dependant on constraints), otherwise it will wrap the height & width of the given child elements. For example, given...