Using the Different Style Widgets and Properties in Dart's Flutter Framework

What Will I Learn?

• You will learn how to use box decoration and text style widgets
• You will learn how to use the transform widget
• You will learn how to use the rich text and text span widgets
• You will learn how to apply box shadows, radial gradients, and matrix transforms to widgets

Requirements

• IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
• The Dart SDK and the Flutter SDK
• A fair understanding of Mobile development and Imperative or Object Oriented Programming

Difficulty

• Intermediate

Description

In this flutter video tutorial, we look at the many different styling widgets in the flutter framework in more depth. This includes the box decoration widget, the text style widget, box shadow widgets, the alignment properties, text align properties, transformation properties, the transform widget and a few others. We start by looking at the many ways that we can transform and style our text in flutter. We can select different font weights, font families, font sizes and font styles to manipulate how our text looks. This includes importing custom fonts as assets into our project through the pubspec.yaml file.

We then look at some of the ways that we can change a container widget. We can scale the widget, we can add shadowing, change the border shape, change the overall shape, alter the scaling, rotate the widget and apply many different color combinations and gradients to our containers. We look at the transform widget which lets us take a matrix 4 object and then apply a method to it. This method allows us to change the children of this widget based on the values of the matrix transformation.

Finally, we look at the rich text widget and the text span widget. These widgets are mainly for creating large text widget trees in flutter. The rich text widget is specifically made for large blocks of text and the text span widgets act like spans from an HTML document. They allow us to select and override the styling of the parent to individually style the words and the sentences in the text block.

The source code for this project can be found here

Video Tutorial

Curriculum

• Dart Flutter Cross Platform Chat Application Tutorial
• Building a Multi-Page Application with Dart's Flutter Mobile Framework
• Making Http requests and Using Json in Dart's Flutter Framework
• Building Dynamic Lists with Streams in Dart's Flutter Framework
• Using GridView, Tabs, and Steppers in Dart's Flutter Framework
• Using Global Keys to get State and Validate Input in Dart's Flutter Framework
• The Basics of Animation with Dart's Flutter Framework
• Advanced Physics Based Animations in Dart's Flutter Framework
• Building a Drag and Drop Application with Dart's Flutter Framework
• Building a Hero Animation and an Application Drawer in Dart's Flutter Framework
• Building a Temperature Conversion Application using Dart's Flutter Framework
• Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework
• Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework
• Building a Calculator Layout using Dart's Flutter Framework
• Finishing our Calculator Application with Dart's Flutter Framework
• Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework

---

Posted on Utopian.io - Rewarding Open Source Contributors

---