diff --git a/dartpad_codelabs/src/box_and_text_decoration/borders/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/borders/instructions.md
new file mode 100644
index 0000000000..4076105a6d
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/borders/instructions.md
@@ -0,0 +1,47 @@
+# Borders
+
+By this point, you've worked with background colors, gradients and images: nice 
+job! Now, it's time to try out borders.
+
+Designers often use borders to visually separate different sections of
+content. Some sections may have a thick, black border on the right side,
+while another section may be surrounded by a thin, grey border on all sides.
+
+You can provide a `Border` class to the `BoxDecoration` constructor to configure
+the size and color of the borders.
+
+## BorderSide
+
+Use the default `Border` constructor to configure the look of the top, left,
+bottom and right sides individually. The `BorderSide` class contains information
+about what each side or edge should look like.
+
+```dart
+BoxDecoration(
+  border: Border(
+    top: BorderSide(color: Colors.orange, width: 20),
+    left: BorderSide(color: Colors.green, width: 30),
+    bottom: BorderSide(color: Colors.yellow, width: 5),
+    right: BorderSide(color: Colors.red, width: 10),
+  ),
+);
+```
+
+## Border.all
+
+In many cases, you'll want the top, left, bottom and right borders to all look
+the same. Rather than using the default `Border` constructor, use the
+`Border.all` constructor as a shortcut:
+
+```dart
+BoxDecoration(
+  border: Border.all(
+    color: Colors.orange,
+    width: 20,
+  ),
+);
+```
+
+Your turn: Apply a border to the `BoxDecoration`! Play with different borders
+and sides to get a feel for the various options you can configure, then try 
+the `Border.all` constructor!
diff --git a/dartpad_codelabs/src/box_and_text_decoration/borders/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/borders/snippet.dart
new file mode 100644
index 0000000000..ebec6d02da
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/borders/snippet.dart
@@ -0,0 +1,17 @@
+// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      // Add a border to the BoxDecoration!
+      decoration: BoxDecoration(),
+    );
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/container/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/container/instructions.md
new file mode 100644
index 0000000000..eecfe49f61
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/container/instructions.md
@@ -0,0 +1,63 @@
+# Containers
+
+So far, you've worked with `DecoratedBox` widgets to style backgrounds, borders,
+rounded corners and shadows. Furthermore, you've worked with the `Padding` 
+Widget to add a bit of space around the `DecoratedBox`. In this section, you'll 
+learn about the `Container` widget which combines several Widgets into one,
+reducing the amount of Widgets you have to nest!
+
+## Without Container
+
+What if we wanted to nest a child `DecoratedBox` inside a parent `DecoratedBox`?
+What if we wanted the parent to have some space around it, and also give the
+child some space around it as well?
+
+We can achieve exactly that with our current tools.
+
+```dart
+Padding(
+  padding: EdgeInsets.all(20),
+  child: DecoratedBox(
+    decoration: BoxDecoration(color: Colors.blue),
+    child: Padding(
+      padding: EdgeInsets.all(5),
+      child: DecoratedBox(
+        decoration: BoxDecoration(color: Colors.green),
+      ),
+    ),
+  ),
+);
+```
+
+## With Container
+
+However, the example above requires 4 Widgets and 3 levels of nesting. In other
+words, it's difficult to read and understand. Instead, you can use the
+`Container` widget to reduce the amount of required Widgets and deep nesting.
+
+First, pass a `margin` argument to the `Container` widget's constructor to
+configure how much space should surround the `Container` itself. Then, pass a
+`padding` argument to configure much space should surround the child.
+
+Finally, pass a `decoration` argument to define the background decorations that
+sit below the child widget, and a `foregroundDecoration` if you want to get
+fancy and display some decorations on top of the child widget!
+
+Using `Container`, you can recreate the exact same Widget tree from above, but
+now you only have to create 2 Widgets yourself with 1 level of nesting!
+
+```dart
+Container(
+  margin: EdgeInsets.all(20),
+  padding: EdgeInsets.all(5),
+  decoration: BoxDecoration(color: Colors.blue),
+  child: DecoratedBox(
+    decoration: BoxDecoration(color: Colors.green),
+  ),
+);
+```
+
+Your turn: Use the `Container` widget to simplify the sample code on the right!
+Container not only contains `Padding` and `DecoratedBox` shortcuts, it also
+combines several other Widgets into one. Play around with different arguments
+you can pass to the `Container` constructor!
diff --git a/dartpad_codelabs/src/box_and_text_decoration/container/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/container/snippet.dart
new file mode 100644
index 0000000000..1e3d022dcd
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/container/snippet.dart
@@ -0,0 +1,25 @@
+// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.all(5),
+      child: DecoratedBox(
+        decoration: BoxDecoration(color: Colors.green),
+        child: Padding(
+          padding: EdgeInsets.all(10),
+          child: DecoratedBox(
+            decoration: BoxDecoration(color: Colors.purple),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/images/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/images/instructions.md
new file mode 100644
index 0000000000..9cb9e1d17f
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/images/instructions.md
@@ -0,0 +1,69 @@
+# Images
+
+Background colors and gradients are great, but what about displaying images? In
+some cases, you'll want to display a background image. In other cases, you'll
+want to display the standalone image. Flutter provides tools to handle
+both of these cases!
+
+## Background Images
+
+Just like background colors and gradients, the `BoxDecoration` class is used to
+display a background image. Pass a `DecorationImage` to the `BoxDecoration`
+constructor via the `image` parameter.
+
+The `DecorationImage` class defines which image should be displayed and what it
+should look like: the alignment, fit, scale, etc. `ImageProvider` classes are
+used to load images from various locations: the internet, a local file,
+in-memory, and more. The following example uses a `NetworkImage` to load an
+image from the internet.
+
+```dart
+BoxDecoration(
+  image: DecorationImage(
+    image: NetworkImage(
+      'https://dartpad-workshops-io2021.web.app/example_flutter/images/dash.png',
+    ),
+    fit: BoxFit.cover,
+  ),
+);
+```
+
+Your turn: Apply a background image to the `DecoratedBox` and play around with
+various options you can provide to `DecorationImage`.
+
+## Standalone Images
+
+In some cases, you may not want to use an image as a background, but rather as
+a standalone that flows as part of the content of your application.
+
+To display standalone images, use the `Image` widget. Like the
+`DecorationImage`, the `Image` widget uses an `ImageProvider` to determine which
+image should load and from where.
+
+The `Image` widget also provides various constructor parameters you can use to
+alter the display of the image: width, height, alignment, and more.
+
+```dart
+Image(
+  image: NetworkImage(
+    'https://dartpad-workshops-io2021.web.app/example_flutter/images/dash.png',
+  ),
+  fit: BoxFit.cover,
+);
+```
+
+As a shortcut, the `Image` widget also offers constructors for common
+`ImageProvider` classes. For example, the previous code snippet can be 
+shortened using the `Image.network` constructor:
+
+```dart
+Image.network(
+  'https://dartpad-workshops-io2021.web.app/example_flutter/images/dash.png',
+  fit: BoxFit.cover,
+);
+```
+
+Your turn: Replace the `DecoratedBox` with a `Center` widget that contains an
+`Image` widget! Try out various options: fit, alignment, and so on. Did you try
+width and height? Did you notice they don't work yet! We'll discuss that in the
+Layouts workshop :)
diff --git a/dartpad_codelabs/src/box_and_text_decoration/images/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/images/snippet.dart
new file mode 100644
index 0000000000..7e528fca85
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/images/snippet.dart
@@ -0,0 +1,19 @@
+// ignore_for_file: unused_import, prefer_const_constructors, use_key_in_widget_constructors
+
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      // Apply a background image. Play around with fit, alignment, and scale.
+      decoration: BoxDecoration(),
+    );
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/intro/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/intro/instructions.md
new file mode 100644
index 0000000000..bcd8faabea
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/intro/instructions.md
@@ -0,0 +1,62 @@
+# Introduction
+
+Flutter is a toolkit for building User Interfaces, known as UIs. UIs are a
+composition of boxes and text laid out on screen. One box may display an image
+with a drop shadow, while another box may have rounded corners with some text
+sitting on top of a background gradient.
+
+Therefore, the first stop on your Flutter journey is to learn how to style
+boxes and text! In the land of Flutter, this is known as Box Decoration and Text
+Styling.
+
+# Decorating Boxes
+
+In order style or decorate a portion of the screen with a background color or 
+gradient, create a `DecoratedBox` widget and provide `BoxDecoration` 
+information via the `decoration` parameter.
+
+```dart
+DecoratedBox(
+  decoration: BoxDecoration(
+    // Define box "styles" or decorations here
+  ),
+);
+```
+
+## Background Colors
+
+To define a background color, pass a `color` parameter to the `BoxDecoration`
+constructor. 
+
+```dart
+DecoratedBox(
+  decoration: BoxDecoration(
+    color: Colors.red,
+  ),
+);
+```
+
+Now it's your turn: First, apply a background to the `DecoratedBox` using a few
+`Colors` provided by Flutter. Then, create your own `Color`!
+
+## Background Gradients
+
+To define a background gradient, pass a `gradient` parameter to the
+`BoxDecoration` constructor. Flutter includes two types of gradients:
+`LinearGradient` and `RadialGradient`. Each type of gradient can be configured
+in different ways: you can change the colors, stops, and direction.
+
+```dart
+DecoratedBox(
+  decoration: BoxDecoration(
+    gradient: LinearGradient(
+      colors: [Colors.red, Colors.blue],
+    ),
+  ),
+);
+```
+
+Your turn: Apply a gradient background to the `BoxDecoration`. Place your cursor
+inside the `BoxDecoration` or `LinearGradient` constructor and type `Ctrl` +
+`Space` to view a list of the parameters you can configure. Play with a few
+combinations to get a feel for how gradients work! 
diff --git a/dartpad_codelabs/src/box_and_text_decoration/intro/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/intro/snippet.dart
new file mode 100644
index 0000000000..c6c3fea2b5
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/intro/snippet.dart
@@ -0,0 +1,17 @@
+// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: Colors.blue,
+        // Try out various background colors and gradients
+      ),
+    );
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/meta.yaml b/dartpad_codelabs/src/box_and_text_decoration/meta.yaml
new file mode 100644
index 0000000000..566e9e56bb
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/meta.yaml
@@ -0,0 +1,34 @@
+name: Github Pages Test
+
+# Accepts 'flutter' or 'dart'
+type: flutter
+
+# Configuration for each step
+steps:
+  - name: Background Colors & Gradients
+    directory: intro
+    has_solution: false
+  - name: Padding
+    directory: images
+    has_solution: false
+  - name: Borders
+    directory: borders
+    has_solution: false
+  - name: Rounded Corners
+    directory: rounded_corners
+    has_solution: false
+  - name: Padding
+    directory: padding
+    has_solution: false
+  - name: Shadows
+    directory: shadows
+    has_solution: false
+  - name: Container
+    directory: container
+    has_solution: false
+  - name: Text Styles
+    directory: text
+    has_solution: false
+  - name: Put it all together
+    directory: outro
+    has_solution: false
diff --git a/dartpad_codelabs/src/box_and_text_decoration/outro/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/outro/instructions.md
new file mode 100644
index 0000000000..7462863cbd
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/outro/instructions.md
@@ -0,0 +1,21 @@
+# Congrats!
+
+Yay! Congrats on making it through the workshop :) You've gone on a long journey
+to decorate boxes and style text. You can display images and make some pretty
+snazzy gradient backgrounds.
+
+Furthermore, you've seen that Flutter provides many shortcuts for common tasks:
+widgets, like `Container`, that reduce nesting or constructors, like
+`Border.all`, that reduce the amount of code you have to write.
+
+If you'd like, please spend some time combining all of the different techniques
+discussed in the previous steps using the Dartpad to the right. Play around
+with different box and text styles to create something unique, or take some
+inspiration from a recent design you've needed to implement in another project
+and try to make it happen in Flutter!
+
+## Next Steps
+
+  - [Basic Flutter layout concepts](https://docs.flutter.dev/codelabs/layout-basics)
+  - [Write your first Flutter app, part 1](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1)
+  - [Write your first Flutter app, part 2](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2)
\ No newline at end of file
diff --git a/dartpad_codelabs/src/box_and_text_decoration/outro/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/outro/snippet.dart
new file mode 100644
index 0000000000..efa4bb76a1
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/outro/snippet.dart
@@ -0,0 +1,15 @@
+// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    /// Let your imagination run wild :)
+    return Container();
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/padding/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/padding/instructions.md
new file mode 100644
index 0000000000..f2c824ee0e
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/padding/instructions.md
@@ -0,0 +1,77 @@
+# Padding
+
+In the previous step, the borders of the `DecoratedBox` run up against the edges
+of the window. What if you wanted to give your `DecoratedBox` some room to 
+breathe by surrounding it with some space? That's where the `Padding` widget 
+comes in!
+
+You can nest any widget inside a `Padding` widget to configure how much
+space should surround it. You can give each side of the box the same amount of
+padding or define each side individually.
+
+## Uniform padding
+
+The `Padding` widget constructor accepts a `child` argument that determines
+which widget should be padded. It also accepts `EdgeInsets` information via the
+`padding` argument to configure exactly how much padding should appear on each
+side. To give every side the same padding, use the `EdgeInsets.all` constructor.
+
+```dart
+Padding(
+  padding: EdgeInsets.all(20),
+  child: DecoratedBox(
+    decoration: BoxDecoration(
+      borderRadius: BorderRadius.circular(10),
+      color: Colors.blue,
+    ),
+  ),
+);
+```
+
+## Symmetric padding
+
+Often times, you'll want to apply the same padding to the top and bottom edges,
+or left and right edges. These are known as the `vertical` and `horizontal` 
+edges. The `EdgeInsets` class provides a shortcut constructor for exactly this 
+case: `EdgeInsets.symmetric`.
+
+```dart
+Padding(
+  padding: EdgeInsets.symmetric(
+    vertical: 20,
+    horizontal: 10,
+  ),
+  child: DecoratedBox(
+    decoration: BoxDecoration(
+      borderRadius: BorderRadius.circular(10),
+      color: Colors.purple,
+    ),
+  ),
+);
+```
+
+## Individual padding
+
+Finally, you may need to apply unique padding to each side. Use the
+`EdgeInsets.only` constructor to define the padding of the top, left, bottom and
+right sides.
+
+```aidl
+Padding(
+  padding: EdgeInsets.only(
+    top: 20,
+    left: 5,
+    bottom: 15,
+    right: 30,
+  ),
+  child: DecoratedBox(
+    decoration: BoxDecoration(
+      borderRadius: BorderRadius.circular(10),
+      color: Colors.green,
+    ),
+  ),
+);
+```
+
+Your turn: Wrap the `DecoratedBox` on with a `Padding` widget. Play around with
+the various `EdgeInsets` constructors to create different padding effects.
diff --git a/dartpad_codelabs/src/box_and_text_decoration/padding/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/padding/snippet.dart
new file mode 100644
index 0000000000..091d003db7
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/padding/snippet.dart
@@ -0,0 +1,19 @@
+// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // Wrap the DecoratedBox with some Padding!
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: Colors.pink,
+      ),
+    );
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/rounded_corners/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/rounded_corners/instructions.md
new file mode 100644
index 0000000000..b427fa1f96
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/rounded_corners/instructions.md
@@ -0,0 +1,55 @@
+# Rounded Corners
+
+Now, it would be a pretty boring world if all the boxes in your app had to have
+sharp edges. Some designs just look better with smooth, rounded corners! 
+Luckily, you can define the roundness of each corner by passing `borderRadius` 
+information to the `BoxDecoration` constructor.
+
+You can either define a uniform size and shape for all corners, or define a
+unique size and shape for each individual corner: top-left, top-right,
+bottom-left, and bottom-right.
+
+## Uniform Corners
+
+Use the `BorderRadius.all` constructor to give every corner the same size and
+shape, known as a `Radius`. A `Radius` can be either circular or elliptical in
+shape.
+
+```dart
+BoxDecoration(
+  borderRadius: BorderRadius.all(Radius.circular(10)),
+  color: Colors.blue,
+)
+```
+
+If you find yourself using circular border radii most of the time, you can even
+use a shorthand constructor: `BorderRadius.circular`.
+
+```dart
+BoxDecoration(
+  borderRadius: BorderRadius.circular(10),
+  color: Colors.blue,
+)
+```
+
+## Individual Corners
+
+To define a unique size and shape (aka `Radius`) for each corner, use the 
+`BorderRadius.only` constructor. This example even demonstrates elliptical 
+corners for fun!
+
+```dart
+BoxDecoration(
+  borderRadius: BorderRadius.only(
+    topLeft: Radius.elliptical(20, 40),
+    topRight: Radius.elliptical(40, 20),
+    bottomLeft: Radius.circular(20),
+    bottomRight: Radius.circular(40),
+  ),
+  color: Colors.blue,
+)
+```
+
+Your turn: Give the `DecoratedBox` some rounded corners! First, try using
+`BorderRadius.all`, then `BorderRadius.circular`, finally `BorderRadius.only`.
+Play around with different types and sizes of `Radius`.
diff --git a/dartpad_codelabs/src/box_and_text_decoration/rounded_corners/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/rounded_corners/snippet.dart
new file mode 100644
index 0000000000..f4f8d8aaaf
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/rounded_corners/snippet.dart
@@ -0,0 +1,20 @@
+// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        // Add a borderRadius here!
+
+        color: Colors.blue,
+      ),
+    );
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/shadows/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/shadows/instructions.md
new file mode 100644
index 0000000000..54e35051fa
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/shadows/instructions.md
@@ -0,0 +1,28 @@
+# Shadows
+
+In some cases, you may want one section of content to sit "above" or "on top of"
+another section of content. To establish this type of visual hierarchy, your
+designer may decide the content sitting on top should cast a shadow over the
+content sitting below. These are often called "drop shadows" or "box shadows."
+
+When it comes to Flutter, `BoxDecoration` once again saves the day. You may 
+provide a list of `BoxShadow` objects to the `BoxDecoration` constructor to
+configure one or more shadows!
+
+```dart
+BoxDecoration(
+  boxShadow: [
+    BoxShadow(
+      color: Colors.orange,
+      offset: Offset(10, 20),
+      blurRadius: 10,
+      spreadRadius: 0,
+    )
+  ],
+  color: Colors.blue,
+)
+```
+
+Your turn: Add a `BoxShadow` to the `BoxDecoration`! Play around with the 
+various options you can define with a `BoxShadow`. Then, add a second shadow
+to see the effect.
diff --git a/dartpad_codelabs/src/box_and_text_decoration/shadows/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/shadows/snippet.dart
new file mode 100644
index 0000000000..39e95fe9a5
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/shadows/snippet.dart
@@ -0,0 +1,21 @@
+// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.all(60),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: Colors.blue,
+        ),
+      ),
+    );
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/shadows/solution.dart b/dartpad_codelabs/src/box_and_text_decoration/shadows/solution.dart
new file mode 100644
index 0000000000..bd37d70cfc
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/shadows/solution.dart
@@ -0,0 +1,29 @@
+// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.all(60),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          boxShadow: [
+            BoxShadow(
+              color: Colors.orange,
+              offset: Offset(10, 20),
+              blurRadius: 10,
+              spreadRadius: 2,
+            )
+          ],
+          color: Colors.blue,
+        ),
+      ),
+    );
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/text/instructions.md b/dartpad_codelabs/src/box_and_text_decoration/text/instructions.md
new file mode 100644
index 0000000000..7d6a976137
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/text/instructions.md
@@ -0,0 +1,45 @@
+# Text
+
+It's time to to move on from boxes to text! How can you display text in Flutter?
+How do you work with a left-to-right language, such as English, or a
+right-to-left language, such as Hebrew? How do you change the size, or italicize
+the text?
+
+## Display Text
+
+To display text on screen, use the `Text` widget. By default, Flutter does not
+know which direction to paint text: left-to-right (ltr) or right-to-left (rtl).
+Therefore, you must also specify a `textDirection`.
+
+```dart
+Text(
+  'This is a bit of text!',
+  textDirection: TextDirection.ltr,
+);
+```
+
+## Style Text
+
+In order to style text, pass a `TextStyle` object into the `Text` widget
+constructor via the `style` parameter. The `TextStyle` class configures the font
+color, size, weight, style, and more. Use it to make your text bold, italicized,
+and absolutely humungous!
+
+```dart
+Text(
+  'This is a bit of text!',
+  textDirection: TextDirection.ltr,
+  style: TextStyle(
+    fontSize: 48,
+    fontWeight: FontWeight.bold,
+    fontStyle: FontStyle.italic,
+    color: Colors.blue,
+  ),
+);
+```
+
+Your turn: Display some text and change the look and feel using the `TextStyle`
+class! Place your cursor inside the `TextStyle` constructor and press 
+`Ctrl+Space` to see additional settings you can configure. Play around with
+some of these additional settings to get a feel for styling text in Flutter.
+
diff --git a/dartpad_codelabs/src/box_and_text_decoration/text/snippet.dart b/dartpad_codelabs/src/box_and_text_decoration/text/snippet.dart
new file mode 100644
index 0000000000..3e8e839256
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/text/snippet.dart
@@ -0,0 +1,14 @@
+// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Text('Customize me!'); // Display and style some text of your own!
+  }
+}
diff --git a/dartpad_codelabs/src/box_and_text_decoration/text/solution.dart b/dartpad_codelabs/src/box_and_text_decoration/text/solution.dart
new file mode 100644
index 0000000000..b48b06aa77
--- /dev/null
+++ b/dartpad_codelabs/src/box_and_text_decoration/text/solution.dart
@@ -0,0 +1,23 @@
+// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, use_key_in_widget_constructors
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      'This is a bit of text!',
+      textDirection: TextDirection.ltr,
+      style: TextStyle(
+        color: Colors.blue,
+        fontSize: 24,
+        fontWeight: FontWeight.bold,
+        fontStyle: FontStyle.italic,
+      ),
+    );
+  }
+}