diff --git a/.gitignore b/.gitignore
index 0e08184d97..896f2a2930 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ packages
 example/*.dart
 
 .idea/
+.vscode/
diff --git a/Gemfile b/Gemfile
index e763d3af09..9f3983a74b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,5 @@
 source 'https://rubygems.org'
-gem 'jekyll'
+gem 'jekyll', '3.3.1'
 gem 'therubyracer'
 gem 'html-proofer'
 gem 'rake'
-gem 'jekyll-redirect-from'
-gem 'liquid-tag-parser'
diff --git a/Gemfile.lock b/Gemfile.lock
index a81a7bfa57..c116551e61 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -11,14 +11,8 @@ GEM
     colorator (1.1.0)
     colorize (0.8.1)
     concurrent-ruby (1.0.5)
-    em-websocket (0.5.1)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
     ethon (0.11.0)
       ffi (>= 1.3.0)
-    eventmachine (1.2.7)
-    extras (0.3.0)
-      forwardable-extended (~> 2.5)
     ffi (1.9.25)
     forwardable-extended (2.6.0)
     html-proofer (3.9.1)
@@ -30,34 +24,26 @@ GEM
       parallel (~> 1.3)
       typhoeus (~> 1.3)
       yell (~> 2.0)
-    http_parser.rb (0.6.0)
-    i18n (0.9.5)
+    i18n (1.0.1)
       concurrent-ruby (~> 1.0)
-    jekyll (3.8.3)
+    jekyll (3.3.1)
       addressable (~> 2.4)
       colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 0.7)
       jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 1.14)
-      liquid (~> 4.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
       mercenary (~> 0.3.3)
       pathutil (~> 0.9)
-      rouge (>= 1.7, < 4)
+      rouge (~> 1.7)
       safe_yaml (~> 1.0)
-    jekyll-redirect-from (0.14.0)
-      jekyll (~> 3.3)
     jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-watch (2.0.0)
+    jekyll-watch (1.5.1)
       listen (~> 3.0)
     kramdown (1.17.0)
     libv8 (3.16.14.19)
-    liquid (4.0.0)
-    liquid-tag-parser (1.9.0)
-      extras (~> 0.3)
-      liquid (>= 3.0, < 5.0)
+    liquid (3.0.6)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -76,7 +62,7 @@ GEM
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     ref (2.0.0)
-    rouge (3.1.1)
+    rouge (1.11.1)
     ruby_dep (1.5.0)
     safe_yaml (1.0.4)
     sass (3.5.7)
@@ -99,11 +85,9 @@ PLATFORMS
 
 DEPENDENCIES
   html-proofer
-  jekyll
-  jekyll-redirect-from
-  liquid-tag-parser
+  jekyll (= 3.3.1)
   rake
   therubyracer
 
 BUNDLED WITH
-   1.16.2
+   1.16.3
diff --git a/README.md b/README.md
index 2a1f08ef1f..2afb299016 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,9 @@
 # [Flutter][]'s website
 
+
+Proyecto de traducción de:
 The website for [Flutter][].
+[Readme en español](https://github.com/flutter-es/website/tree/master/es_ES/)
 
 [![Build Status](https://travis-ci.org/flutter/website.svg?branch=master)](https://travis-ci.org/flutter/website)
 
diff --git a/_config.yml b/_config.yml
index 82229af6e1..dc38a120c4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -6,6 +6,7 @@ baseurl: "" # the subpath of your site, e.g. /blog/
 url: https://flutter.io
 port: 4002
 github_username: flutter
+lang: es_ES
 
 # Build settings
 markdown: kramdown
@@ -16,25 +17,25 @@ kramdown:
 
 exclude: [example, packages, tool]
 
-plugins:
-  - jekyll-redirect-from
-
-## Site-wide shorthands
-
-alert:
-  tip: >-
-    <aside class="alert alert-success" role="alert" markdown="1">
-    <i class="fa fa-lightbulb-o"></i> **Tip:**
-  note: >-
-    <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="fa fa-info-circle"></i> **Note:**
-  important: >-
-    <aside class="alert alert-warning" role="alert">
-    <i class="fa fa-warning"></i> **Important:**
-  warning: >-
-    <aside class="alert alert-danger" role="alert">
-    <i class="fa fa-exclamation-circle"></i> **Warning:**
-  end: </aside>
+# plugins:
+#   - jekyll-redirect-from
+
+# ## Site-wide shorthands
+
+# alert:
+#   tip: >-
+#     <aside class="alert alert-success" role="alert" markdown="1">
+#     <i class="fa fa-lightbulb-o"></i> **Tip:**
+#   note: >-
+#     <aside class="alert alert-info" role="alert" markdown="1">
+#     <i class="fa fa-info-circle"></i> **Note:**
+#   important: >-
+#     <aside class="alert alert-warning" role="alert">
+#     <i class="fa fa-warning"></i> **Important:**
+#   warning: >-
+#     <aside class="alert alert-danger" role="alert">
+#     <i class="fa fa-exclamation-circle"></i> **Warning:**
+#   end: </aside>
 
   # callout_danger: '<div class="bs-callout bs-callout-danger">'
   # callout_default: '<div class="bs-callout bs-callout-default">'
diff --git a/_plugins/es-data-reader.rb b/_plugins/es-data-reader.rb
new file mode 100644
index 0000000000..2a49b218da
--- /dev/null
+++ b/_plugins/es-data-reader.rb
@@ -0,0 +1,19 @@
+module Jekyll
+  class EsDataReader < Jekyll::DataReader
+
+    DATA_KEY = "_data/"
+    PREFIX = "es_ES"
+
+    def read_data_file(path)
+      file_path = path.dup
+      es_file_path = path.dup
+      data_key_index = path.index(DATA_KEY)
+      if data_key_index && data_key_index >= 0
+        es_file_path.insert(data_key_index, "#{PREFIX}/")
+        File.exist?(es_file_path) && file_path = es_file_path
+      end
+      super(file_path)
+    end
+
+  end
+end
\ No newline at end of file
diff --git a/_plugins/es-generator.rb b/_plugins/es-generator.rb
new file mode 100644
index 0000000000..fc8804c7b3
--- /dev/null
+++ b/_plugins/es-generator.rb
@@ -0,0 +1,32 @@
+module Jekyll
+  class ESGenerator < Generator
+    safe true
+    PREFIX = "es_ES"
+
+    def generate(site)
+      lang = site.config["lang"] || "en"
+      if !PREFIX.eql?(lang)
+        return
+      end
+      puts "Configuration file: Habilitar archivo de configuración，Español"
+      translatedNum = 0
+      deleteList = []
+      site.pages.each do |page|
+        newPath = "#{site.source}/#{PREFIX}/#{page.path}"
+        isFileExist = File.exist?(newPath)
+        if isFileExist
+          deleteList << page
+          translatedNum += 1
+        end
+      end
+      site.pages -= deleteList
+      totalNum = site.pages.size
+      completeP = translatedNum * 100 / totalNum.to_f
+      completePStr = format('%.2f', completeP)
+      puts "=================== Progreso de la traducción：#{translatedNum}/#{totalNum}，Porcentaje：#{completePStr}%"
+      # site.pages.each do |page|
+      #   puts "#{page.url} => #{page.path}"
+      # end
+    end
+  end
+end
\ No newline at end of file
diff --git a/_plugins/es-include.rb b/_plugins/es-include.rb
new file mode 100644
index 0000000000..285cde5c51
--- /dev/null
+++ b/_plugins/es-include.rb
@@ -0,0 +1,22 @@
+module Jekyll
+  class ESInClude < Jekyll::Tags::IncludeTag
+
+    INCLUDE_KEY = "_includes/"
+    PREFIX = "es_ES"
+
+    def read_file(file, context)
+      file_path = file.dup
+      cn_file_path = file.dup
+      include_index = file.index(INCLUDE_KEY)
+      if include_index >= 0
+        cn_file_path.insert(include_index, "#{PREFIX}/")
+        File.exist?(cn_file_path) && file_path = cn_file_path
+      end
+
+      super(file_path, context)
+    end
+
+  end
+end
+
+Liquid::Template.register_tag("include", Jekyll::ESInClude)
\ No newline at end of file
diff --git a/_plugins/es-plugin-injector.rb b/_plugins/es-plugin-injector.rb
new file mode 100644
index 0000000000..0ee9725d90
--- /dev/null
+++ b/_plugins/es-plugin-injector.rb
@@ -0,0 +1,6 @@
+# Inyecta los objetos necesarios para el complemento Español 
+# antes de que el Bundle comienze a funcionar
+# 1. Reemplaza el lector con EsReader
+Jekyll::Hooks.register :site, :after_init do |site|
+  site.reader = Jekyll::EsReader.new(site)
+end
\ No newline at end of file
diff --git a/_plugins/es-reader.rb b/_plugins/es-reader.rb
new file mode 100644
index 0000000000..943e9d0fac
--- /dev/null
+++ b/_plugins/es-reader.rb
@@ -0,0 +1,14 @@
+module Jekyll
+  class EsReader < Jekyll::Reader
+
+    def read
+      @site.layouts = LayoutReader.new(site).read
+      read_directories
+      sort_files!
+      @site.data = Jekyll::EsDataReader.new(site).read(site.config["data_dir"])
+      CollectionReader.new(site).read
+      ThemeAssetsReader.new(site).read
+    end
+
+  end
+end
\ No newline at end of file
diff --git a/_plugins/prettify.rb b/_plugins/prettify.rb
index 26a3daf809..b12a1cd81e 100644
--- a/_plugins/prettify.rb
+++ b/_plugins/prettify.rb
@@ -1,115 +1,77 @@
-# Copied from https://github.com/dart-lang/site-shared/blob/master/src/_plugins/prettify.rb
-# and slightly adapted for use with prism.js
-#
 # Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 # for details. All rights reserved. Use of this source code is governed by a
 # BSD-style license that can be found in the LICENSE file.
 
 require 'cgi'
-require 'liquid/tag/parser' # https://github.com/envygeeks/liquid-tag-parser
 
 module Prettify
 
   # Wraps code with tags for Prettify.
   #
-  # Arguments:
-  #
-  # - The first unnamed optional argument is the prettifier lang argument.
-  #   Use 'nocode' or 'none' as the language to turn of prettifying.
-  # - class="..."
-  # - tag="pre|pre+code|code|code+br". The HTML element used to wrap the prettified code.
-  #   Default is pre. The `code` element is used for `code+br`; in addition,
-  #   newlines in the code excerpt are reformatted at `<br>` elements.
-  #
   # Example usage:
-  #
+  # 
   # {% prettify dart %}
-  # var hello = 'world';
+  # // dart code here
   # {% endprettify %}
-
+  #
+  # The language name can be ommitted if it is not known.
   class Tag < Liquid::Block
 
-    def initialize(tag_name, stringOfArgs, tokens)
-      super
-      @args = Liquid::Tag::Parser.new(stringOfArgs).args
-      @lang = @args[:argv1]
-      @tag = @args[:tag] || 'pre'
-      @tag = 'code' if @tag == 'code+br';
-      initCssClasses
-    end
+    Syntax = /\s*(\w+)\s*/o
 
-    def initCssClasses
-      @cssClasses = []
-      unless @lang == 'nocode' || @lang == 'none'
-        @cssClasses << "lang-#{@lang}" if @lang
+    def initialize(tag_name, markup, tokens)
+      super
+      if markup =~ Syntax
+        @lang = $1
       end
-      @cssClasses << @args[:class] if @args[:class]
     end
 
-    def classAttr
-      @cssClasses.empty? ? '' : " class=\"#{@cssClasses.join(' ')}\""
+    def unindent(original)
+      indent = original.split("\n").select do |line|
+        !line.strip.empty?
+      end.map do |line|
+        line.index(/[^\s]/)
+      end.compact.min || 0
+      original.gsub(/^[[:blank:]]{#{indent}}/, '')
     end
 
     def render(context)
-      out = "<#{@tag}#{classAttr}>"
-      out += '<code>' if @tag == 'pre'
-
-      code = trimMinLeadingSpace(super)
-      # Strip leading and trailing whitespace so that <pre> and </pre> tags wrap tightly
-      code.strip!
-      code = CGI::escapeHTML(code)
-
-      if @args[:tag] == 'code+br'
-        code.gsub!(/\n[ \t]*/) { |s|
-          "<br>\n#{'&nbsp;' * (s.length - 1)}"
-        }
+      # out = '<pre class="prettyprint linenums'
+      out = '<pre class="prettyprint highlighter-rouge highlight'
+      unless @lang.nil?
+        out += ' lang-' + @lang
+        out += ' language-' + @lang
       end
+      out += '"><code>'
 
-      # Names of tags previously supported: highlight, note, red, strike.
-      code.gsub!(/\[\[(\w+)\]\]/, '<span class="\1">')
-      code.gsub!(/\[\[\/(\w+)\]\]/, '</span>')
+      contents = unindent(super)
 
-      # Flutter tag syntax variant:
-      code.gsub!(/\/\*\*(\w+)\*\//, '<span class="\1">')
-      code.gsub!(/\/\*-(\w+)\*\//, '</span>')
+      contents = contents.strip
+      contents = CGI::escapeHTML(contents)
 
-      code.gsub!('[!', '<span class="highlight">')
-      code.gsub!('!]', '</span>')
+      contents.gsub!('[[strike]]', '<span class="nocode strike">')
+      contents.gsub!('[[/strike]]', '</span>')
+      contents.gsub!('/**strike*/', '<span class="nocode strike">')
+      contents.gsub!('/*-strike*/', '</span>')
 
-      out += code
-      out += '</code>' if @tag == 'pre'
-      out += "</#{@tag}>"
-    end
-
-    def trimMinLeadingSpace(code)
-      lines = code.split(/\n/);
-
-      # 1. Trim leading blank lines
-      while lines.first =~ /^\s*$/ do lines.shift; end
-
-      # 2. Trim trailing blank lines. Also determine minimal
-      # indentation for the entire code block.
-      # This is required for uses of prettify that are indented in
-      # markdown -- for example, when used in a list.
+      contents.gsub!('[[highlight]]', '<span class="nocode highlight">')
+      contents.gsub!('[[/highlight]]', '</span>')
+      contents.gsub!('/**highlight*/', '<span class="nocode highlight">')
+      contents.gsub!('/*-highlight*/', '</span>')
 
-      # Last line should consist of the indentation of the `endprettify`
-      # (when it is on a separate line).
-      last_line = lines.last =~ /^\s*$/ ? lines.pop : ''
-      while lines.last =~ /^\s*$/ do lines.pop end
-      min_len = last_line.length
+      contents.gsub!('[[note]]', '<span class="nocode note">')
+      contents.gsub!('[[/note]]', '</span>')
+      contents.gsub!('/**note*/', '<span class="nocode note">')
+      contents.gsub!('/*-note*/', '</span>')
 
-      nonblanklines = lines.reject { |s| s.match(/^\s*$/) }
+      contents.gsub!('[[red]]', '<span class="nocode red">')
+      contents.gsub!('[[/red]]', '</span>')
+      contents.gsub!('/**red*/', '<span class="nocode red">')
+      contents.gsub!('/*-red*/', '</span>')
 
-      # 3. Determine length of leading spaces to be trimmed
-      len = nonblanklines.map{ |s|
-        matches = s.match(/^[ \t]*/)
-        matches ? matches[0].length : 0 }.min
-
-      # Only trim the excess relative to min_len
-      len = len < min_len ? min_len : len - min_len
-
-      len == 0 ? code : lines.map{|s| s.length < len ? s : s.sub(/^[ \t]{#{len}}/, '')}.join("\n")
+      out += contents + "</code></pre>"
     end
+
   end
 end
 
diff --git a/es_ES/404.md b/es_ES/404.md
new file mode 100644
index 0000000000..626b1f26db
--- /dev/null
+++ b/es_ES/404.md
@@ -0,0 +1,11 @@
+---
+layout: page
+title: Página no encontrada
+permalink: /404.html
+---
+
+## 404: Halgo a ido mal :-(
+
+You’ve stumbled onto a page that doesn’t exist. Luckily this site has other [pages](/).
+
+If you were looking for something specific, maybe try our [search page](https://flutter.io/search/).
diff --git a/es_ES/README.md b/es_ES/README.md
new file mode 100644
index 0000000000..376a378087
--- /dev/null
+++ b/es_ES/README.md
@@ -0,0 +1,262 @@
+# [Flutter-es][] en Español
+
+El sitio web original [Flutter][].
+
+[![Estatus de Version ](https://travis-ci.org/flutter-es/website.svg?branch=master)](https://travis-ci.org/flutter-es/website)
+
+## Problemas, errores y peticiones
+
+Agradecemos todas las contribuciones y retroalimentaciones en nuestro sitio web!
+Por favor realiza una peticion en nuestro
+[issue traker](https://github.com/flutter-es/website/issues/new)
+y le daremos un vistazo.
+
+## Desarrollo
+
+Sigue nuestra guía en nuestra [wiki](https://github.com/flutter-es/website/wiki/Como-colaborar)
+
+
+## Desplegar a un staging site
+
+Para ediciones realizadas de manera local (utilizando los pasos de arriba en 'desarrollo'), usted puede desplegarlos
+a un sitio de staging personal de la forma siguiente (los paso 1 y 2 solo necesitan ser realizados en una ocasión):
+
+1. En la [Consola Firebase](https://console.firebase.google.com),
+crea tu propio projecto Firebase (ej. 'mi-flutter-staging')
+
+1. Comunica a Firebase acerca del proyecto con firebase CLI
+[commando `use` ](https://firebase.googleblog.com/2016/07/deploy-to-multiple-environments-with.html):
+	```
+	$ firebase use --add
+	? Which project do you want to add? <select the project you created>
+	? What alias do you want to use for this project? (e.g. staging) staging
+	```
+
+1. Comunica a Firebase que quieres desplegar a staging:
+	```
+	$ firebase use staging
+	Now using alias staging (<nombre de tu proyecto>)
+	```
+
+1. Comunica a Firebase que despliegue:
+	```
+	$ firebase use staging
+	Now using alias staging (<nombre del proyecto>)
+	$ firebase deploy
+
+	=== Deploying to '<nombre de tu proyecto>'...
+
+	i  deploying hosting
+	i  hosting: preparing _site directory for upload...
+	✔  hosting: 213 files uploaded successfully
+	i  starting release process (may take several minutes)...
+
+	✔  Deploy complete!
+	```
+
+### Agregando enlaces de pagina siguiente/anterior
+
+Si se tiene un documento que abarca multiples páginas, usted puede agregar enlaces a páginas 
+siguiente y anterior para hacer la navegación de estas páginas más sencilla. esto requiere agregar 
+algo de información al frente de cada página, e incluir algo de HTML.
+
+```
+---
+layout: tutorial
+title: "Constraints"
+
+permalink: /tutorials/layout/constraints.html
+prev-page: /tutorials/layout/properties.html
+prev-page-title: "Container Properties"
+next-page: /tutorials/layout/create.html
+next-page-title: "Create a Layout"
+---
+
+{% include prev-next-nav.html %}
+
+{:toc}
+
+<!-- PAGE CONTENT -->
+
+{% include prev-next-nav.html %}
+```
+
+Omite la informacion "prev-page" para la primera pagina, y "next-page" 
+para la ultima.
+
+## Destacando sintaxis
+
+El sitio de flutter.io utiliza [prism.js](http://prismjs.com/) para resaltar
+sintaxis. Esta seccion cubre como utilizar el resaltado de sintaxis, y
+como actualizar nuestro resaltado de sintaxis para lenguajes nuevos.
+
+### Lenguajes soportados
+
+Este sitio puede resaltar sintaxis de los siguiente lenguajes:
+
+* shell
+* dart
+* html
+* css
+* javascript
+* java
+* objectivec
+* swift
+
+### Utilizando el resaltado de sintaxis
+
+La manera más fácil de resaltar la sintaxis de un bloque de código es envolviéndolo
+en tres comillas invertidas seguidas por el lenguaje.
+
+Aqui de ve un ejemplo:
+
+	```dart
+	class ExampleWidget extends StatelessWidget {
+      @override
+      Widget build(BuildContext context) {
+        return new Container();
+      }
+    }
+	```
+
+Consulte la lista de lenguajes admitidos anteriormente para saber qué usar después de las primeras comillas invertidas triples.
+
+### Agregando más lenguajes al resaltado de sintaxis
+
+El sitio web de flutter.io utiliza un contructor de prism personalizado, el cual 
+incluye solo los lenguajes que el sitio requiere. Para mejorar 
+la carga y experiencia de usuario, nosotros no soportamos cada
+lenguajes que prism soporta.
+
+Para agregar un lenguaje nuevo al resaltado de lenguaje, usted necesitara
+generar una copia de el archivo `prism.js`.
+
+Siga los siguientes pasos para generar una nueva copia de `prism.js`:
+
+* Abra `js/prism.js`
+* Copie la URL comentada en la primera linea del archivo
+* Pegala en el navegador.
+* Agrega el nuevo lenguaje que deseas al resaltador de sintaxis.
+* POR FAVOR NO cambie a otros complementos, lenguajes o configuraciones.
+* Descargue el JavaScript generado, y reemplace `js/prism.js`
+* Descargue el CSS generado, y reemplace `_sass/_prism.scss`
+
+## Estilo avanzado en un bloque de código 
+
+Quieres resaltar (poner el fondo de color amarillo)
+código dentro de un bloque de código? Quieres poner un texto tachado
+dentro de un bloque de código? tenemos eso!
+
+Para resaltar sintaxis, a demas resaltas en amarillo
+y dar formato de tachado, utilice la etiqueta `prettify`
+con personalización adicional en línea.
+
+Si quisiera resaltar un pedazo de código específico, utilice
+la sintaxis `[[highlight]]highlight this text[[/highlight]]` 
+con la etiqueta `prettify`.
+
+Por ejemplo:
+
+    {% prettify dart %}
+    void main() {
+      print([[highlight]]'Hello World'[[/highlight]]);
+    }
+    {% endprettify %}
+
+Si quisiera tachar un pedazo de código, utilice
+la sintaxis `[[strike]]highlight this text[[/strike]]`
+con la etiqueta `prettify`.
+
+Por ejemplo:
+
+    {% prettify dart %}
+    void main() {
+      print([[strike]]'Hello World'[[/strike]]);
+    }
+    {% endprettify %}
+
+El complemento `prettify` también quitará el indentado de tu código.
+
+Si quiere ver mas acerca de estas funcionalidades agregadas a este sitio, dirigase a
+[este commit](https://github.com/flutter/website/commit/ea15f52fe47d3a7b6313ac58d07c66f3b29fe74d).
+
+## Incluyendo region a un archivo
+
+Usted puede incluir un rango específico de líneas desde un archivo:
+
+```ruby
+{% include includelines filename=PATH start=INT count=INT %}
+```
+
+`PATH` Debe estar dentro de `_include`. Si usted está incluyendo código fuente,
+coloca tu código dentro `_include/code` para seguir nuestra convención.
+
+## Validación de fragmento de código
+
+Los fragmentos de código en la documentación es validado como parte de
+proceso de contrucción. Cualquier cosas dentro de un '\`\`\`dart' puede extraerse dentro
+de su propio archivo y verificar para analisis de problemas. Algunas formas de modificar esto:
+
+- Si un fragmento de codigo no debe ser analizado, se procede inmediatamente con un comentario `<!-- skip -->`
+- Para incluir código a ser analizado, pero no desplegado, agregue eso en su comentario
+  inmediatamente proceda con el fragmento (ej., `<!-- someCodeHere(); -->`)
+- Una fragmento sin ninguna declaración import automaticamente tendra un import
+  (`'package:flutter/material.dart'`) agregado a el.
+- Ignoramos el formato especial con las etiquetas con `[[highlight]]`.
+
+[Flutter]: https://flutter.io
+[Flutter-es]: https://flutter-es.firebaseapp.com/
+
+## Actualizando el catalogo de ejemplo
+
+Los archivos de muestra del catalogo de "markdown" son generados al correr [sample_page.dart](https://github.com/flutter/flutter/blob/master/examples/catalog/bin/sample_page.dart) para el repositorio de Flutter en github. Empezando desde la raíz del repositorio de Flutter:
+
+```
+cd examples/catalog
+dart bin/sample_page.dart '<commit hashcode here>'
+cp examples/catalog/.generated/*.md <your website repo>/catalog/samples
+```
+
+Los archivos "markdown" generados contendran los enlaces almacenados en la nube para capturas de pantalla en app de muestra. Las capturas de pantalla para cada app de muestra son generadas automaticamente para cada commit realizado en el repositorio de Flutter. Elige un commit con hashcode reciente y confirma que las capturas se ven bien.
+
+Si nuevas apps de muestra han sido agregadas, actualiza `_data/catalog/widget.json`. La entrada para cada clase del widget que aparece en una aplicación de muestra debe contener una línea como `"sample"`:
+
+```
+"sample": "ListView_index",
+```
+
+La app `sample_page.dart` imprimirá una lista de todos las propiedades `"sample"` que deberían aparecer en el archivo `widget.json`.
+
+## Previniendo enlaces rotos
+
+Alguna forma de prevención de enlaces rotos se realiza automáticamente `rake checklinks`
+en cada commit (a travez de `tool/travis.sh`). Pero esto no verá ningún redireccionamiento de Firebase (`rake checklinks` no ejecutan el servidor de Firebase) y no verificará los enlaces entrantes.
+
+Antes de que podamos mover a una más completa
+[solucion automatizada de `linkcheck`](https://github.com/dart-lang/site-webdev/blob/master/scripts/check-links-using-fb.sh)
+de dartlang.org, recomendamos ejecutar manualmente lo siguiente.
+
+* Configuracion de inicio:
+
+  ```
+  pub global activate linkcheck
+  npm install -g superstatic
+  ```
+
+* Iniciar el servidor de Firebase local:
+
+  ```
+  superstatic --port 3474
+  ```
+
+* Ejecutar el verificador de enlaces:
+
+  ```
+  linkcheck :3474
+  ```
+
+  Aun mejor, verificar que las URLs viejas esta redireccionadas correctamente:
+
+  ```
+  linkcheck :3474 --input-file tool/sitemap.txt
+  ```
diff --git a/es_ES/_data/docs_cards.yml b/es_ES/_data/docs_cards.yml
new file mode 100644
index 0000000000..e6e27c485e
--- /dev/null
+++ b/es_ES/_data/docs_cards.yml
@@ -0,0 +1,9 @@
+- name: Empezar
+  description: Configura tu entorno de desarrollo y comienza a construir..
+  url: /get-started/install/
+- name: Catálogo de Widgets
+  description: Sumérgete en el rico set de widgets de Flutter disponibles en la SDK.
+  url: /widgets/
+- name: Documentación de la API
+  description: Guarda en tus bookmarks la documentación de referencia de la API del framework de Flutter.
+  url: https://docs.flutter.io/
diff --git a/es_ES/_includes/banner.html b/es_ES/_includes/banner.html
new file mode 100644
index 0000000000..1cd98f6731
--- /dev/null
+++ b/es_ES/_includes/banner.html
@@ -0,0 +1,4 @@
+{% assign blacklist = "/,/setup/,/bootstrap-into-dart/" | split:"," %}
+{% unless blacklist contains include.url %}
+<div class="alert alert-info alert__banner" role="alert"><i class="fa fa-chevron-circle-right "></i> &nbsp; {{include.content}}</div>
+{% endunless %}
diff --git a/es_ES/_includes/body.html b/es_ES/_includes/body.html
new file mode 100644
index 0000000000..e83115b773
--- /dev/null
+++ b/es_ES/_includes/body.html
@@ -0,0 +1,4 @@
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K5CZXWP"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
diff --git a/es_ES/_includes/catalogpage.html b/es_ES/_includes/catalogpage.html
new file mode 100644
index 0000000000..2a3b2d4f56
--- /dev/null
+++ b/es_ES/_includes/catalogpage.html
@@ -0,0 +1,67 @@
+<div class="catalog">
+    {% for section in site.data.catalog.index %}
+    {% if section.name contains include.category %}
+    <div class="category-description"><p>{{section.description}}</p></div>
+    {% endif %}
+    {% endfor %}
+
+    <ul>
+        {% for category in site.data.catalog.index %}
+        {% if category.name == include.category %}
+        {% for sub in category.subcategories %}
+        <li><a href="#{{sub.name}}">{{sub.name}}</a></li>
+        {% endfor %}
+        {% endif %}
+        {% endfor %}
+    </ul>
+
+    <p>Ver mas widgets en el <a href="/widgets">catálogo de widgets de Flutter</a>.</p>
+
+    <ul class="cards">
+        {% for comp in site.data.catalog.widgets %}
+        {% if comp.categories contains include.category %}
+        <li class="cards__item">
+            <div class="catalog-entry">
+                <div class="catalog-image-holder">{{comp.image}}</div>
+                <h3>{{comp.name}}</h3>
+                <p class="scrollable-description"> {{comp.description}} </p>
+                <p>
+                    <a href="{{comp.link}}">Documentación</a>
+                    {% if comp.sample %}, <a href="/catalog/samples/{{comp.sample}}/">Muestras</a>{% endif %}
+                </p>
+                <div class="clear"></div>
+            </div>
+        </li>
+        {% endif %}
+        {% endfor %}
+    </ul>
+
+
+    {% for category in site.data.catalog.index %}
+    {% if category.name == include.category %}
+    {% for sub in category.subcategories %}
+    <h1 id="{{sub.name}}">{{sub.name}}</h1>
+    <ul class="cards">
+        {% for comp in site.data.catalog.widgets %}
+        {% if comp.subcategories contains sub.name %}
+        <li class="cards__item">
+            <div class="catalog-entry" >
+                <div class="catalog-image-holder">{{comp.image}}</div>
+                <h3>{{comp.name}}</h3>
+                <p class="scrollable-description"> {{comp.description}} </p>
+                <p>
+                    <a href="{{comp.link}}">Documentación</a>
+                    {% if comp.sample %}, <a href="/catalog/samples/{{comp.sample}}/">Muestras</a>{% endif %}
+                </p>
+                <div class="clear"></div>
+            </div>
+        </li>
+        {% endif %}
+        {% endfor %}
+    </ul>
+    {% endfor %}
+    {% endif %}
+    {% endfor %}
+
+    <p>Ver mas widgets en el <a href="/widgets">catálogo de widgets de Flutter</a>.</p>
+</div>
diff --git a/es_ES/_includes/code/.gitignore b/es_ES/_includes/code/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/analysis_options.yaml b/es_ES/_includes/code/analysis_options.yaml
new file mode 100644
index 0000000000..b6c39526ea
--- /dev/null
+++ b/es_ES/_includes/code/analysis_options.yaml
@@ -0,0 +1 @@
+include: package:flutter/analysis_options_user.yaml
diff --git a/es_ES/_includes/code/animation/animate1/main.dart b/es_ES/_includes/code/animation/animate1/main.dart
new file mode 100644
index 0000000000..109639bc35
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate1/main.dart
@@ -0,0 +1,48 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/animation.dart';
+import 'package:flutter/material.dart';
+
+class LogoApp extends StatefulWidget {
+  _LogoAppState createState() => _LogoAppState();
+}
+
+class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
+  Animation<double> animation;
+  AnimationController controller;
+
+  initState() {
+    super.initState();
+    controller = AnimationController(
+        duration: const Duration(milliseconds: 2000), vsync: this);
+    animation = Tween(begin: 0.0, end: 300.0).animate(controller)
+      ..addListener(() {
+        setState(() {
+          // the state that has changed here is the animation object’s value
+        });
+      });
+    controller.forward();
+  }
+
+  Widget build(BuildContext context) {
+    return Center(
+      child: Container(
+        margin: EdgeInsets.symmetric(vertical: 10.0),
+        height: animation.value,
+        width: animation.value,
+        child: FlutterLogo(),
+      ),
+    );
+  }
+
+  dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+}
+
+void main() {
+  runApp(LogoApp());
+}
diff --git a/es_ES/_includes/code/animation/animate1/pubspec.yaml b/es_ES/_includes/code/animation/animate1/pubspec.yaml
new file mode 100644
index 0000000000..de1bd3b2da
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate1/pubspec.yaml
@@ -0,0 +1,58 @@
+name: animate1
+description: A new Flutter project.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+
+# For information on the generic Dart part of this file, see the
+# following page: https://www.dartlang.org/tools/pub/pubspec
+
+# The following section is specific to Flutter.
+flutter:
+
+  # The following line ensures that the Material Icons font is
+  # included with your application, so that you can use the icons in
+  # the Icons class.
+  uses-material-design: true
+
+  # To add assets to your application, add an assets section, like this:
+  # assets:
+  #  - images/a_dot_burr.jpeg
+  #  - images/a_dot_ham.jpeg
+
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.io/assets-and-images/.
+
+  # To add assets from package dependencies, first ensure the asset
+  # is in the lib/ directory of the dependency. Then,
+  # refer to the asset with a path prefixed with
+  # `packages/PACKAGE_NAME/`. The `lib/` is implied, do not
+  # include `lib/` in the asset path.
+  #
+  # Here is an example:
+  #
+  # assets:
+  #  - packages/PACKAGE_NAME/path/to/asset
+
+  # To add custom fonts to your application, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
diff --git a/es_ES/_includes/code/animation/animate2/main.dart b/es_ES/_includes/code/animation/animate2/main.dart
new file mode 100644
index 0000000000..b5098bd5a6
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate2/main.dart
@@ -0,0 +1,55 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Demonstrates a simple animation with AnimatedWidget.
+
+import 'package:flutter/animation.dart';
+import 'package:flutter/material.dart';
+
+class AnimatedLogo extends AnimatedWidget {
+  AnimatedLogo({Key key, Animation<double> animation})
+      : super(key: key, listenable: animation);
+
+  Widget build(BuildContext context) {
+    final Animation<double> animation = listenable;
+    return Center(
+      child: Container(
+        margin: EdgeInsets.symmetric(vertical: 10.0),
+        height: animation.value,
+        width: animation.value,
+        child: FlutterLogo(),
+      ),
+    );
+  }
+}
+
+class LogoApp extends StatefulWidget {
+  _LogoAppState createState() => _LogoAppState();
+}
+
+class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
+  AnimationController controller;
+  Animation<double> animation;
+
+  initState() {
+    super.initState();
+    controller = AnimationController(
+        duration: const Duration(milliseconds: 2000), vsync: this);
+    animation = Tween(begin: 0.0, end: 300.0).animate(controller);
+    controller.forward();
+  }
+
+  Widget build(BuildContext context) {
+    return AnimatedLogo(animation: animation);
+  }
+
+  dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+}
+
+void main() {
+  runApp(LogoApp());
+}
diff --git a/es_ES/_includes/code/animation/animate2/pubspec.yaml b/es_ES/_includes/code/animation/animate2/pubspec.yaml
new file mode 100644
index 0000000000..6aeff9cad0
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate2/pubspec.yaml
@@ -0,0 +1,58 @@
+name: animate2
+description: A new Flutter project.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+
+# For information on the generic Dart part of this file, see the
+# following page: https://www.dartlang.org/tools/pub/pubspec
+
+# The following section is specific to Flutter.
+flutter:
+
+  # The following line ensures that the Material Icons font is
+  # included with your application, so that you can use the icons in
+  # the Icons class.
+  uses-material-design: true
+
+  # To add assets to your application, add an assets section, like this:
+  # assets:
+  #  - images/a_dot_burr.jpeg
+  #  - images/a_dot_ham.jpeg
+
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.io/assets-and-images/.
+
+  # To add assets from package dependencies, first ensure the asset
+  # is in the lib/ directory of the dependency. Then,
+  # refer to the asset with a path prefixed with
+  # `packages/PACKAGE_NAME/`. The `lib/` is implied, do not
+  # include `lib/` in the asset path.
+  #
+  # Here is an example:
+  #
+  # assets:
+  #  - packages/PACKAGE_NAME/path/to/asset
+
+  # To add custom fonts to your application, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
diff --git a/es_ES/_includes/code/animation/animate3/main.dart b/es_ES/_includes/code/animation/animate3/main.dart
new file mode 100644
index 0000000000..2cfeea351b
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate3/main.dart
@@ -0,0 +1,63 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Demonstrates a repeating animation.
+
+import 'package:flutter/animation.dart';
+import 'package:flutter/material.dart';
+
+class AnimatedLogo extends AnimatedWidget {
+  AnimatedLogo({Key key, Animation<double> animation})
+      : super(key: key, listenable: animation);
+
+  Widget build(BuildContext context) {
+    final Animation<double> animation = listenable;
+    return Center(
+      child: Container(
+        margin: EdgeInsets.symmetric(vertical: 10.0),
+        height: animation.value,
+        width: animation.value,
+        child: FlutterLogo(),
+      ),
+    );
+  }
+}
+
+class LogoApp extends StatefulWidget {
+  _LogoAppState createState() => _LogoAppState();
+}
+
+class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
+  AnimationController controller;
+  Animation<double> animation;
+
+  initState() {
+    super.initState();
+    controller = AnimationController(
+        duration: const Duration(milliseconds: 2000), vsync: this);
+    animation = Tween(begin: 0.0, end: 300.0).animate(controller);
+
+    animation.addStatusListener((status) {
+      if (status == AnimationStatus.completed) {
+        controller.reverse();
+      } else if (status == AnimationStatus.dismissed) {
+        controller.forward();
+      }
+    });
+    controller.forward();
+  }
+
+  Widget build(BuildContext context) {
+    return AnimatedLogo(animation: animation);
+  }
+
+  dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+}
+
+void main() {
+  runApp(LogoApp());
+}
diff --git a/es_ES/_includes/code/animation/animate3/pubspec.yaml b/es_ES/_includes/code/animation/animate3/pubspec.yaml
new file mode 100644
index 0000000000..fccd2e9722
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate3/pubspec.yaml
@@ -0,0 +1,58 @@
+name: animate3
+description: A new Flutter project.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+
+# For information on the generic Dart part of this file, see the
+# following page: https://www.dartlang.org/tools/pub/pubspec
+
+# The following section is specific to Flutter.
+flutter:
+
+  # The following line ensures that the Material Icons font is
+  # included with your application, so that you can use the icons in
+  # the Icons class.
+  uses-material-design: true
+
+  # To add assets to your application, add an assets section, like this:
+  # assets:
+  #  - images/a_dot_burr.jpeg
+  #  - images/a_dot_ham.jpeg
+
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.io/assets-and-images/.
+
+  # To add assets from package dependencies, first ensure the asset
+  # is in the lib/ directory of the dependency. Then,
+  # refer to the asset with a path prefixed with
+  # `packages/PACKAGE_NAME/`. The `lib/` is implied, do not
+  # include `lib/` in the asset path.
+  #
+  # Here is an example:
+  #
+  # assets:
+  #  - packages/PACKAGE_NAME/path/to/asset
+
+  # To add custom fonts to your application, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
diff --git a/es_ES/_includes/code/animation/animate4/main.dart b/es_ES/_includes/code/animation/animate4/main.dart
new file mode 100644
index 0000000000..d84bd58fe4
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate4/main.dart
@@ -0,0 +1,68 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Demonstrate a factored animation with AnimatedBuilder.
+
+import 'package:flutter/animation.dart';
+import 'package:flutter/material.dart';
+
+class LogoWidget extends StatelessWidget {
+  // Leave out the height and width so it fills the animating parent
+  build(BuildContext context) {
+    return Container(
+        margin: EdgeInsets.symmetric(vertical: 10.0),
+        child: FlutterLogo());
+  }
+}
+
+class GrowTransition extends StatelessWidget {
+  GrowTransition({this.child, this.animation});
+
+  final Widget child;
+  final Animation<double> animation;
+
+  Widget build(BuildContext context) {
+    return Center(
+      child: AnimatedBuilder(
+          animation: animation,
+          builder: (BuildContext context, Widget child) {
+            return Container(
+                height: animation.value, width: animation.value, child: child);
+          },
+          child: child),
+    );
+  }
+}
+
+class LogoApp extends StatefulWidget {
+  _LogoAppState createState() => _LogoAppState();
+}
+
+class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
+  Animation animation;
+  AnimationController controller;
+
+  initState() {
+    super.initState();
+    controller = AnimationController(
+        duration: const Duration(milliseconds: 2000), vsync: this);
+    final CurvedAnimation curve =
+        CurvedAnimation(parent: controller, curve: Curves.easeIn);
+    animation = Tween(begin: 0.0, end: 300.0).animate(curve);
+    controller.forward();
+  }
+
+  Widget build(BuildContext context) {
+    return GrowTransition(child: LogoWidget(), animation: animation);
+  }
+
+  dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+}
+
+void main() {
+  runApp(LogoApp());
+}
diff --git a/es_ES/_includes/code/animation/animate4/pubspec.yaml b/es_ES/_includes/code/animation/animate4/pubspec.yaml
new file mode 100644
index 0000000000..34941f10b8
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate4/pubspec.yaml
@@ -0,0 +1,58 @@
+name: animate4
+description: A new Flutter project.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+
+# For information on the generic Dart part of this file, see the
+# following page: https://www.dartlang.org/tools/pub/pubspec
+
+# The following section is specific to Flutter.
+flutter:
+
+  # The following line ensures that the Material Icons font is
+  # included with your application, so that you can use the icons in
+  # the Icons class.
+  uses-material-design: true
+
+  # To add assets to your application, add an assets section, like this:
+  # assets:
+  #  - images/a_dot_burr.jpeg
+  #  - images/a_dot_ham.jpeg
+
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.io/assets-and-images/.
+
+  # To add assets from package dependencies, first ensure the asset
+  # is in the lib/ directory of the dependency. Then,
+  # refer to the asset with a path prefixed with
+  # `packages/PACKAGE_NAME/`. The `lib/` is implied, do not
+  # include `lib/` in the asset path.
+  #
+  # Here is an example:
+  #
+  # assets:
+  #  - packages/PACKAGE_NAME/path/to/asset
+
+  # To add custom fonts to your application, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
diff --git a/es_ES/_includes/code/animation/animate5/main.dart b/es_ES/_includes/code/animation/animate5/main.dart
new file mode 100644
index 0000000000..193c461a97
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate5/main.dart
@@ -0,0 +1,71 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Demonstrate an AnimatedWidget with multiple Tweens.
+
+import 'package:flutter/animation.dart';
+import 'package:flutter/material.dart';
+
+class AnimatedLogo extends AnimatedWidget {
+  // Make the Tweens static because they don't change.
+  static final _opacityTween = Tween<double>(begin: 0.1, end: 1.0);
+  static final _sizeTween = Tween<double>(begin: 0.0, end: 300.0);
+
+  AnimatedLogo({Key key, Animation<double> animation})
+      : super(key: key, listenable: animation);
+
+  Widget build(BuildContext context) {
+    final Animation<double> animation = listenable;
+    return Center(
+      child: Opacity(
+        opacity: _opacityTween.evaluate(animation),
+        child: Container(
+          margin: EdgeInsets.symmetric(vertical: 10.0),
+          height: _sizeTween.evaluate(animation),
+          width: _sizeTween.evaluate(animation),
+          child: FlutterLogo(),
+        ),
+      ),
+    );
+  }
+}
+
+class LogoApp extends StatefulWidget {
+  _LogoAppState createState() => _LogoAppState();
+}
+
+class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
+  AnimationController controller;
+  Animation<double> animation;
+
+  initState() {
+    super.initState();
+    controller = AnimationController(
+        duration: const Duration(milliseconds: 2000), vsync: this);
+    animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);
+
+    animation.addStatusListener((status) {
+      if (status == AnimationStatus.completed) {
+        controller.reverse();
+      } else if (status == AnimationStatus.dismissed) {
+        controller.forward();
+      }
+    });
+
+    controller.forward();
+  }
+
+  Widget build(BuildContext context) {
+    return AnimatedLogo(animation: animation);
+  }
+
+  dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+}
+
+void main() {
+  runApp(LogoApp());
+}
diff --git a/es_ES/_includes/code/animation/animate5/pubspec.yaml b/es_ES/_includes/code/animation/animate5/pubspec.yaml
new file mode 100644
index 0000000000..84b1d58802
--- /dev/null
+++ b/es_ES/_includes/code/animation/animate5/pubspec.yaml
@@ -0,0 +1,58 @@
+name: animate5
+description: A new Flutter project.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+
+# For information on the generic Dart part of this file, see the
+# following page: https://www.dartlang.org/tools/pub/pubspec
+
+# The following section is specific to Flutter.
+flutter:
+
+  # The following line ensures that the Material Icons font is
+  # included with your application, so that you can use the icons in
+  # the Icons class.
+  uses-material-design: true
+
+  # To add assets to your application, add an assets section, like this:
+  # assets:
+  #  - images/a_dot_burr.jpeg
+  #  - images/a_dot_ham.jpeg
+
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.io/assets-and-images/.
+
+  # To add assets from package dependencies, first ensure the asset
+  # is in the lib/ directory of the dependency. Then,
+  # refer to the asset with a path prefixed with
+  # `packages/PACKAGE_NAME/`. The `lib/` is implied, do not
+  # include `lib/` in the asset path.
+  #
+  # Here is an example:
+  #
+  # assets:
+  #  - packages/PACKAGE_NAME/path/to/asset
+
+  # To add custom fonts to your application, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
diff --git a/es_ES/_includes/code/animation/basic_hero_animation/images/flippers-alpha.png b/es_ES/_includes/code/animation/basic_hero_animation/images/flippers-alpha.png
new file mode 100644
index 0000000000..ae730977f2
Binary files /dev/null and b/es_ES/_includes/code/animation/basic_hero_animation/images/flippers-alpha.png differ
diff --git a/es_ES/_includes/code/animation/basic_hero_animation/main.dart b/es_ES/_includes/code/animation/basic_hero_animation/main.dart
new file mode 100644
index 0000000000..b7395202ba
--- /dev/null
+++ b/es_ES/_includes/code/animation/basic_hero_animation/main.dart
@@ -0,0 +1,60 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can
+// be found in the LICENSE file.
+
+// Demonstrates a basic shared element (Hero) animation.
+
+import 'package:flutter/material.dart';
+
+class BasicHeroAnimation extends StatelessWidget {
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Basic Hero Animation'),
+      ),
+      body: Center(
+        child: InkWell(
+          onTap: () {
+            Navigator.of(context).push(
+              MaterialPageRoute<Null>(
+                builder: (BuildContext context) {
+                  return Scaffold(
+                    appBar: AppBar(
+                      title: const Text('Flippers Page'),
+                    ),
+                    body: Container(
+                      padding: const EdgeInsets.all(8.0),
+                      alignment: Alignment.topLeft,
+                      // Use background color to emphasize that it's a new route.
+                      color: Colors.lightBlueAccent,
+                      child: Hero(
+                        tag: 'flippers',
+                        child: SizedBox(
+                          width: 100.0,
+                          child: Image.asset(
+                            'images/flippers-alpha.png',
+                          ),
+                        ),
+                      ),
+                    ),
+                  );
+                },
+              ),
+            );
+          },
+          // Main route
+          child: Hero(
+            tag: 'flippers',
+            child: Image.asset(
+              'images/flippers-alpha.png',
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(home: BasicHeroAnimation()));
+}
diff --git a/es_ES/_includes/code/animation/basic_hero_animation/pubspec.yaml b/es_ES/_includes/code/animation/basic_hero_animation/pubspec.yaml
new file mode 100644
index 0000000000..02d7834710
--- /dev/null
+++ b/es_ES/_includes/code/animation/basic_hero_animation/pubspec.yaml
@@ -0,0 +1,15 @@
+name: basic_hero_transition
+description: Shows how to create a simple or Hero animation using the Hero class directly.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/flippers-alpha.png
diff --git a/es_ES/_includes/code/animation/basic_radial_hero_animation/images/beachball-alpha.png b/es_ES/_includes/code/animation/basic_radial_hero_animation/images/beachball-alpha.png
new file mode 100644
index 0000000000..9163b2b357
Binary files /dev/null and b/es_ES/_includes/code/animation/basic_radial_hero_animation/images/beachball-alpha.png differ
diff --git a/es_ES/_includes/code/animation/basic_radial_hero_animation/images/binoculars-alpha.png b/es_ES/_includes/code/animation/basic_radial_hero_animation/images/binoculars-alpha.png
new file mode 100644
index 0000000000..6c207e454a
Binary files /dev/null and b/es_ES/_includes/code/animation/basic_radial_hero_animation/images/binoculars-alpha.png differ
diff --git a/es_ES/_includes/code/animation/basic_radial_hero_animation/images/chair-alpha.png b/es_ES/_includes/code/animation/basic_radial_hero_animation/images/chair-alpha.png
new file mode 100644
index 0000000000..7328534d02
Binary files /dev/null and b/es_ES/_includes/code/animation/basic_radial_hero_animation/images/chair-alpha.png differ
diff --git a/es_ES/_includes/code/animation/basic_radial_hero_animation/main.dart b/es_ES/_includes/code/animation/basic_radial_hero_animation/main.dart
new file mode 100644
index 0000000000..78d8a236f4
--- /dev/null
+++ b/es_ES/_includes/code/animation/basic_radial_hero_animation/main.dart
@@ -0,0 +1,160 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that
+// can be found in the LICENSE file.
+
+// A simple radial transition. The destination route is basic,
+// with no Card, Column, or Text.
+
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart' show timeDilation;
+
+class Photo extends StatelessWidget {
+  Photo({ Key key, this.photo, this.color, this.onTap }) : super(key: key);
+
+  final String photo;
+  final Color color;
+  final VoidCallback onTap;
+
+  Widget build(BuildContext context) {
+    return Material(
+      // Slightly opaque color appears where the image has transparency.
+      // Makes it possible to see the radial transformation's boundary.
+      color: Theme.of(context).primaryColor.withOpacity(0.25),
+      child: InkWell(
+        onTap: onTap,
+        child: Image.asset(
+              photo,
+              fit: BoxFit.contain,
+        ),
+      ),
+    );
+  }
+}
+
+class RadialExpansion extends StatelessWidget {
+  RadialExpansion({
+    Key key,
+    this.maxRadius,
+    this.child,
+  }) : clipRectExtent = 2.0 * (maxRadius / math.sqrt2),
+       super(key: key);
+
+  final double maxRadius;
+  final clipRectExtent;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    // The ClipOval matches the RadialExpansion widget's bounds,
+    // which change per the Hero's bounds as the Hero flies to
+    // the new route, while the ClipRect's bounds are always fixed.
+    return ClipOval(
+      child: Center(
+        child: SizedBox(
+          width: clipRectExtent,
+          height: clipRectExtent,
+          child: ClipRect(
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class RadialExpansionDemo extends StatelessWidget {
+  static const double kMinRadius = 32.0;
+  static const double kMaxRadius = 128.0;
+  static const opacityCurve = const Interval(0.0, 0.75, curve: Curves.fastOutSlowIn);
+
+  static RectTween _createRectTween(Rect begin, Rect end) {
+    return MaterialRectCenterArcTween(begin: begin, end: end);
+  }
+
+  static Widget _buildPage(BuildContext context, String imageName, String description) {
+    return Container(
+      color: Theme.of(context).canvasColor,
+      alignment: FractionalOffset.center,
+      child: SizedBox(
+        width: kMaxRadius * 2.0,
+        height: kMaxRadius * 2.0,
+        child: Hero(
+          createRectTween: _createRectTween,
+          tag: imageName,
+          child: RadialExpansion(
+            maxRadius: kMaxRadius,
+            child: Photo(
+              photo: imageName,
+              onTap: () {
+                Navigator.of(context).pop();
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHero(BuildContext context, String imageName, String description) {
+    return Container(
+      width: kMinRadius * 2.0,
+      height: kMinRadius * 2.0,
+      child: Hero(
+        createRectTween: _createRectTween,
+        tag: imageName,
+        child: RadialExpansion(
+          maxRadius: kMaxRadius,
+          child: Photo(
+            photo: imageName,
+            onTap: () {
+              Navigator.of(context).push(
+                PageRouteBuilder<Null>(
+                  pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
+                    return AnimatedBuilder(
+                      animation: animation,
+                      builder: (BuildContext context, Widget child) {
+                        return Opacity(
+                          opacity: opacityCurve.transform(animation.value),
+                          child: _buildPage(context, imageName, description),
+                        );
+                      }
+                    );
+                  },
+                ),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    timeDilation = 20.0; // 1.0 is normal animation speed.
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Basic Radial Hero Animation Demo'),
+      ),
+      body: Container(
+        padding: const EdgeInsets.all(32.0),
+        alignment: FractionalOffset.bottomLeft,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            _buildHero(context, 'images/chair-alpha.png', 'Chair'),
+            _buildHero(context, 'images/binoculars-alpha.png', 'Binoculars'),
+            _buildHero(context, 'images/beachball-alpha.png', 'Beach ball'),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(home: RadialExpansionDemo()));
+}
diff --git a/es_ES/_includes/code/animation/basic_radial_hero_animation/pubspec.yaml b/es_ES/_includes/code/animation/basic_radial_hero_animation/pubspec.yaml
new file mode 100644
index 0000000000..a28d6e639b
--- /dev/null
+++ b/es_ES/_includes/code/animation/basic_radial_hero_animation/pubspec.yaml
@@ -0,0 +1,17 @@
+name: basic_radial_hero_transition
+description: Shows how to apply a radial transformation to the Hero as it animates to the new route.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/beachball-alpha.png
+    - images/binoculars-alpha.png
+    - images/chair-alpha.png
diff --git a/es_ES/_includes/code/animation/basic_staggered_animation/main.dart b/es_ES/_includes/code/animation/basic_staggered_animation/main.dart
new file mode 100644
index 0000000000..54e5886044
--- /dev/null
+++ b/es_ES/_includes/code/animation/basic_staggered_animation/main.dart
@@ -0,0 +1,207 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that
+// can be found in the LICENSE file.
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart' show timeDilation;
+
+class StaggerAnimation extends StatelessWidget {
+  StaggerAnimation({ Key key, this.controller }) :
+
+    // Each animation defined here transforms its value during the subset
+    // of the controller's duration defined by the animation's interval.
+    // For example the opacity animation transforms its value during
+    // the first 10% of the controller's duration.
+
+    opacity = Tween<double>(
+      begin: 0.0,
+      end: 1.0,
+    ).animate(
+      CurvedAnimation(
+        parent: controller,
+        curve: Interval(
+          0.0, 0.100,
+          curve: Curves.ease,
+        ),
+      ),
+    ),
+
+    width = Tween<double>(
+      begin: 50.0,
+      end: 150.0,
+    ).animate(
+      CurvedAnimation(
+        parent: controller,
+        curve: Interval(
+          0.125, 0.250,
+          curve: Curves.ease,
+        ),
+      ),
+    ),
+
+    height = Tween<double>(
+      begin: 50.0,
+      end: 150.0
+    ).animate(
+      CurvedAnimation(
+        parent: controller,
+        curve: Interval(
+          0.250, 0.375,
+          curve: Curves.ease,
+        ),
+      ),
+    ),
+
+    padding = EdgeInsetsTween(
+      begin: const EdgeInsets.only(bottom: 16.0),
+      end: const EdgeInsets.only(bottom: 75.0),
+    ).animate(
+      CurvedAnimation(
+        parent: controller,
+        curve: Interval(
+          0.250, 0.375,
+          curve: Curves.ease,
+        ),
+      ),
+    ),
+
+    borderRadius = BorderRadiusTween(
+      begin: BorderRadius.circular(4.0),
+      end: BorderRadius.circular(75.0),
+    ).animate(
+      CurvedAnimation(
+        parent: controller,
+        curve: Interval(
+          0.375, 0.500,
+          curve: Curves.ease,
+        ),
+      ),
+    ),
+
+    color = ColorTween(
+      begin: Colors.indigo[100],
+      end: Colors.orange[400],
+    ).animate(
+      CurvedAnimation(
+        parent: controller,
+        curve: Interval(
+          0.500, 0.750,
+          curve: Curves.ease,
+        ),
+      ),
+    ),
+
+    super(key: key);
+
+  final Animation<double> controller;
+  final Animation<double> opacity;
+  final Animation<double> width;
+  final Animation<double> height;
+  final Animation<EdgeInsets> padding;
+  final Animation<BorderRadius> borderRadius;
+  final Animation<Color> color;
+
+  // This function is called each time the controller "ticks" a new frame.
+  // When it runs, all of the animation's values will have been
+  // updated to reflect the controller's current value.
+  Widget _buildAnimation(BuildContext context, Widget child) {
+    return Container(
+      padding: padding.value,
+      alignment: Alignment.bottomCenter,
+      child: Opacity(
+        opacity: opacity.value,
+        child: Container(
+          width: width.value,
+          height: height.value,
+          decoration: BoxDecoration(
+            color: color.value,
+            border: Border.all(
+              color: Colors.indigo[300],
+              width: 3.0,
+            ),
+            borderRadius: borderRadius.value,
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      builder: _buildAnimation,
+      animation: controller,
+    );
+  }
+}
+
+class StaggerDemo extends StatefulWidget {
+  @override
+  _StaggerDemoState createState() => _StaggerDemoState();
+}
+
+class _StaggerDemoState extends State<StaggerDemo> with TickerProviderStateMixin {
+  AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 2000),
+      vsync: this
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  Future<Null> _playAnimation() async {
+    try {
+      await _controller.forward().orCancel;
+      await _controller.reverse().orCancel;
+    } on TickerCanceled {
+      // the animation got canceled, probably because we were disposed
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    timeDilation = 10.0; // 1.0 is normal animation speed.
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Staggered Animation'),
+      ),
+      body: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: () {
+          _playAnimation();
+        },
+        child: Center(
+          child: Container(
+            width: 300.0,
+            height: 300.0,
+            decoration: BoxDecoration(
+              color: Colors.black.withOpacity(0.1),
+              border: Border.all(
+                color:  Colors.black.withOpacity(0.5),
+              ),
+            ),
+            child: StaggerAnimation(
+              controller: _controller.view
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(home: StaggerDemo()));
+}
diff --git a/es_ES/_includes/code/animation/basic_staggered_animation/pubspec.yaml b/es_ES/_includes/code/animation/basic_staggered_animation/pubspec.yaml
new file mode 100644
index 0000000000..88bd9de301
--- /dev/null
+++ b/es_ES/_includes/code/animation/basic_staggered_animation/pubspec.yaml
@@ -0,0 +1,18 @@
+name: basic_staggered
+description: A new Flutter project.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+  # The following adds the Cupertino Icons font to your application.
+  # Use with the CupertinoIcons class for iOS style icons.
+  cupertino_icons: ^0.1.0
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/animation/hero_animation/images/flippers-alpha.png b/es_ES/_includes/code/animation/hero_animation/images/flippers-alpha.png
new file mode 100644
index 0000000000..ae730977f2
Binary files /dev/null and b/es_ES/_includes/code/animation/hero_animation/images/flippers-alpha.png differ
diff --git a/es_ES/_includes/code/animation/hero_animation/main.dart b/es_ES/_includes/code/animation/hero_animation/main.dart
new file mode 100644
index 0000000000..23d2acf086
--- /dev/null
+++ b/es_ES/_includes/code/animation/hero_animation/main.dart
@@ -0,0 +1,85 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Tap on the source route’s photo to push a new route,
+// containing the same photo at a different location and scale.
+// Return to the previous route by tapping the image, or by using the
+// device’s back-to-the-previous-screen gesture.
+// You can slow the transition using the timeDilation property.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart' show timeDilation;
+
+class PhotoHero extends StatelessWidget {
+  const PhotoHero({ Key key, this.photo, this.onTap, this.width }) : super(key: key);
+
+  final String photo;
+  final VoidCallback onTap;
+  final double width;
+
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      child: Hero(
+        tag: photo,
+        child: Material(
+          color: Colors.transparent,
+          child: InkWell(
+            onTap: onTap,
+            child: Image.asset(
+              photo,
+              fit: BoxFit.contain,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class HeroAnimation extends StatelessWidget {
+  Widget build(BuildContext context) {
+    timeDilation = 10.0; // 1.0 means normal animation speed.
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Basic Hero Animation'),
+      ),
+      body: Center(
+        child: PhotoHero(
+          photo: 'images/flippers-alpha.png',
+          width: 300.0,
+          onTap: () {
+            Navigator.of(context).push(MaterialPageRoute<Null>(
+              builder: (BuildContext context) {
+                return Scaffold(
+                  appBar: AppBar(
+                    title: const Text('Flippers Page'),
+                  ),
+                  body: Container(
+                    // Set background to blue to emphasize that it's a new route.
+                    color: Colors.lightBlueAccent,
+                    padding: const EdgeInsets.all(16.0),
+                    alignment: Alignment.topLeft,
+                    child: PhotoHero(
+                      photo: 'images/flippers-alpha.png',
+                      width: 100.0,
+                      onTap: () {
+                        Navigator.of(context).pop();
+                      },
+                    ),
+                  ),
+                );
+              }
+            ));
+          },
+        ),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(home: HeroAnimation()));
+}
diff --git a/es_ES/_includes/code/animation/hero_animation/pubspec.yaml b/es_ES/_includes/code/animation/hero_animation/pubspec.yaml
new file mode 100644
index 0000000000..89f8fd0384
--- /dev/null
+++ b/es_ES/_includes/code/animation/hero_animation/pubspec.yaml
@@ -0,0 +1,15 @@
+name: hero_animation
+description: Shows how to create a simple Hero transition.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/flippers-alpha.png
diff --git a/es_ES/_includes/code/animation/radial_hero_animation/images/beachball-alpha.png b/es_ES/_includes/code/animation/radial_hero_animation/images/beachball-alpha.png
new file mode 100644
index 0000000000..9163b2b357
Binary files /dev/null and b/es_ES/_includes/code/animation/radial_hero_animation/images/beachball-alpha.png differ
diff --git a/es_ES/_includes/code/animation/radial_hero_animation/images/binoculars-alpha.png b/es_ES/_includes/code/animation/radial_hero_animation/images/binoculars-alpha.png
new file mode 100644
index 0000000000..6c207e454a
Binary files /dev/null and b/es_ES/_includes/code/animation/radial_hero_animation/images/binoculars-alpha.png differ
diff --git a/es_ES/_includes/code/animation/radial_hero_animation/images/chair-alpha.png b/es_ES/_includes/code/animation/radial_hero_animation/images/chair-alpha.png
new file mode 100644
index 0000000000..7328534d02
Binary files /dev/null and b/es_ES/_includes/code/animation/radial_hero_animation/images/chair-alpha.png differ
diff --git a/es_ES/_includes/code/animation/radial_hero_animation/main.dart b/es_ES/_includes/code/animation/radial_hero_animation/main.dart
new file mode 100644
index 0000000000..1f4e0f2beb
--- /dev/null
+++ b/es_ES/_includes/code/animation/radial_hero_animation/main.dart
@@ -0,0 +1,180 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that
+// can be found in the LICENSE file.
+
+// A "radial transformation" as defined here:
+// https://material.io/guidelines/motion/transforming-material.html#transforming-material-radial-transformation
+
+// In this example, the destination route (which completely obscures
+// the source route once the page transition has finished),
+// displays the Hero image in a Card containing a column of two
+// widgets: the image, and some descriptive text.
+
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart' show timeDilation;
+
+class Photo extends StatelessWidget {
+  Photo({ Key key, this.photo, this.color, this.onTap }) : super(key: key);
+
+  final String photo;
+  final Color color;
+  final VoidCallback onTap;
+
+  Widget build(BuildContext context) {
+    return Material(
+      // Slightly opaque color appears where the image has transparency.
+      color: Theme.of(context).primaryColor.withOpacity(0.25),
+      child: InkWell(
+        onTap: onTap,
+        child: LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints size) {
+            return Image.asset(
+              photo,
+              fit: BoxFit.contain,
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class RadialExpansion extends StatelessWidget {
+  RadialExpansion({
+    Key key,
+    this.maxRadius,
+    this.child,
+  }) : clipRectSize = 2.0 * (maxRadius / math.sqrt2),
+       super(key: key);
+
+  final double maxRadius;
+  final clipRectSize;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipOval(
+      child: Center(
+        child: SizedBox(
+          width: clipRectSize,
+          height: clipRectSize,
+          child: ClipRect(
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class RadialExpansionDemo extends StatelessWidget {
+  static const double kMinRadius = 32.0;
+  static const double kMaxRadius = 128.0;
+  static const opacityCurve = const Interval(0.0, 0.75, curve: Curves.fastOutSlowIn);
+
+  static RectTween _createRectTween(Rect begin, Rect end) {
+    return MaterialRectCenterArcTween(begin: begin, end: end);
+  }
+
+  static Widget _buildPage(BuildContext context, String imageName, String description) {
+    return Container(
+      color: Theme.of(context).canvasColor,
+      child: Center(
+        child: Card(
+          elevation: 8.0,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SizedBox(
+                width: kMaxRadius * 2.0,
+                height: kMaxRadius * 2.0,
+                child: Hero(
+                  createRectTween: _createRectTween,
+                  tag: imageName,
+                  child: RadialExpansion(
+                    maxRadius: kMaxRadius,
+                    child: Photo(
+                      photo: imageName,
+                      onTap: () {
+                        Navigator.of(context).pop();
+                      },
+                    ),
+                  ),
+                ),
+              ),
+              Text(
+                description,
+                style: TextStyle(fontWeight: FontWeight.bold),
+                textScaleFactor: 3.0,
+              ),
+              const SizedBox(height: 16.0),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHero(BuildContext context, String imageName, String description) {
+    return Container(
+      width: kMinRadius * 2.0,
+      height: kMinRadius * 2.0,
+      child: Hero(
+        createRectTween: _createRectTween,
+        tag: imageName,
+        child: RadialExpansion(
+          maxRadius: kMaxRadius,
+          child: Photo(
+            photo: imageName,
+            onTap: () {
+              Navigator.of(context).push(
+                PageRouteBuilder<Null>(
+                  pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
+                    return AnimatedBuilder(
+                      animation: animation,
+                      builder: (BuildContext context, Widget child) {
+                        return Opacity(
+                          opacity: opacityCurve.transform(animation.value),
+                          child: _buildPage(context, imageName, description),
+                        );
+                      }
+                    );
+                  },
+                ),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    timeDilation = 5.0; // 1.0 is normal animation speed.
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Radial Transition Demo'),
+      ),
+      body: Container(
+        padding: const EdgeInsets.all(32.0),
+        alignment: FractionalOffset.bottomLeft,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            _buildHero(context, 'images/chair-alpha.png', 'Chair'),
+            _buildHero(context, 'images/binoculars-alpha.png', 'Binoculars'),
+            _buildHero(context, 'images/beachball-alpha.png', 'Beach ball'),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(home: RadialExpansionDemo()));
+}
diff --git a/es_ES/_includes/code/animation/radial_hero_animation/pubspec.yaml b/es_ES/_includes/code/animation/radial_hero_animation/pubspec.yaml
new file mode 100644
index 0000000000..f3d736501a
--- /dev/null
+++ b/es_ES/_includes/code/animation/radial_hero_animation/pubspec.yaml
@@ -0,0 +1,17 @@
+name: radial_hero_animation
+description: Shows how to apply a radial transformation to the Hero as it animates to the new route.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/beachball-alpha.png
+    - images/binoculars-alpha.png
+    - images/chair-alpha.png
diff --git a/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/beachball-alpha.png b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/beachball-alpha.png
new file mode 100644
index 0000000000..9163b2b357
Binary files /dev/null and b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/beachball-alpha.png differ
diff --git a/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/binoculars-alpha.png b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/binoculars-alpha.png
new file mode 100644
index 0000000000..6c207e454a
Binary files /dev/null and b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/binoculars-alpha.png differ
diff --git a/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/chair-alpha.png b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/chair-alpha.png
new file mode 100644
index 0000000000..7328534d02
Binary files /dev/null and b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/images/chair-alpha.png differ
diff --git a/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/main.dart b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/main.dart
new file mode 100644
index 0000000000..afcb91a4f6
--- /dev/null
+++ b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/main.dart
@@ -0,0 +1,194 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that
+// can be found in the LICENSE file.
+
+// A "radial transition" that slightly differs from the Material
+// motion spec:
+// - The circular *and* the rectangular clips change as t goes from
+//   0.0 to 1.0. (The rectangular clip doesn't change in the
+//   Material motion spec.)
+// - This requires adding LayoutBuilders and computing t.
+// - The key is that the rectangular clip grows more slowly than the
+//   circular clip.
+
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart' show timeDilation;
+
+class Photo extends StatelessWidget {
+  Photo({ Key key, this.photo, this.color, this.onTap }) : super(key: key);
+
+  final String photo;
+  final Color color;
+  final VoidCallback onTap;
+
+  Widget build(BuildContext context) {
+    return Material(
+    // Slightly opaque color appears where the image has transparency.
+    color: Theme.of(context).primaryColor.withOpacity(0.25),
+      child: InkWell(
+        onTap: onTap,
+        child: LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints size) {
+            return Image.asset(
+              photo,
+              fit: BoxFit.contain,
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class RadialExpansion extends StatelessWidget {
+  RadialExpansion({
+    Key key,
+    this.minRadius,
+    this.maxRadius,
+    this.child,
+  }) : clipTween = Tween<double>(
+         begin: 2.0 * minRadius,
+         end: 2.0 * (maxRadius / math.sqrt2),
+       ),
+       super(key: key);
+
+  final double minRadius;
+  final double maxRadius;
+  final Tween<double> clipTween;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints size) {
+        final double t = (size.biggest.width / 2.0 - minRadius) / (maxRadius - minRadius);
+        final double rectClipExtent = clipTween.lerp(t);
+        return ClipOval(
+          child: Center(
+            child: SizedBox(
+              width: rectClipExtent,
+              height: rectClipExtent,
+              child: ClipRect(
+                child: child,
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class RadialExpansionDemo extends StatelessWidget {
+  static const double kMinRadius = 32.0;
+  static const double kMaxRadius = 128.0;
+  static const opacityCurve = const Interval(0.0, 0.75, curve: Curves.fastOutSlowIn);
+
+  static RectTween _createRectTween(Rect begin, Rect end) {
+    return MaterialRectCenterArcTween(begin: begin, end: end);
+  }
+
+  static Widget _buildPage(BuildContext context, String imageName, String description) {
+    return Container(
+      color: Theme.of(context).canvasColor,
+      child: Center(
+        child: Card(
+          elevation: 8.0,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SizedBox(
+                width: kMaxRadius * 2.0,
+                height: kMaxRadius * 2.0,
+                child: Hero(
+                  createRectTween: _createRectTween,
+                  tag: imageName,
+                  child: RadialExpansion(
+                    minRadius: kMinRadius,
+                    maxRadius: kMaxRadius,
+                    child: Photo(
+                      photo: imageName,
+                      onTap: () {
+                        Navigator.of(context).pop();
+                      },
+                    ),
+                  ),
+                ),
+              ),
+              Text(
+                description,
+                style: TextStyle(fontWeight: FontWeight.bold),
+                textScaleFactor: 3.0,
+              ),
+              const SizedBox(height: 16.0),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHero(BuildContext context, String imageName, String description) {
+    return Container(
+      width: kMinRadius * 2.0,
+      height: kMinRadius * 2.0,
+      child: Hero(
+        createRectTween: _createRectTween,
+        tag: imageName,
+        child: RadialExpansion(
+          minRadius: kMinRadius,
+          maxRadius: kMaxRadius,
+          child: Photo(
+            photo: imageName,
+            onTap: () {
+              Navigator.of(context).push(
+                PageRouteBuilder<Null>(
+                  pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
+                    return AnimatedBuilder(
+                      animation: animation,
+                      builder: (BuildContext context, Widget child) {
+                        return Opacity(
+                          opacity: opacityCurve.transform(animation.value),
+                          child: _buildPage(context, imageName, description),
+                        );
+                      }
+                    );
+                  },
+                ),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    timeDilation = 15.0; // 1.0 is normal animation speed.
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Radial Transition Demo'),
+      ),
+      body: Container(
+        padding: const EdgeInsets.all(32.0),
+        alignment: FractionalOffset.bottomLeft,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            _buildHero(context, 'images/chair-alpha.png', 'Chair'),
+            _buildHero(context, 'images/binoculars-alpha.png', 'Binoculars'),
+            _buildHero(context, 'images/beachball-alpha.png', 'Beach ball'),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(home: RadialExpansionDemo()));
+}
diff --git a/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/pubspec.yaml b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/pubspec.yaml
new file mode 100644
index 0000000000..1c036d99d5
--- /dev/null
+++ b/es_ES/_includes/code/animation/radial_hero_animation_animate_rectclip/pubspec.yaml
@@ -0,0 +1,17 @@
+name: radial_hero_animation_animate_rectclip
+description: Shows how to apply a radial transformation to the Hero as it animates to the new route.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/beachball-alpha.png
+    - images/binoculars-alpha.png
+    - images/chair-alpha.png
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic1.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic1.jpg
new file mode 100644
index 0000000000..87f0cae26f
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic1.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic10.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic10.jpg
new file mode 100644
index 0000000000..02b821224b
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic10.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic11.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic11.jpg
new file mode 100644
index 0000000000..a91e135f6a
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic11.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic12.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic12.jpg
new file mode 100644
index 0000000000..9ca2b51c7c
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic12.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic13.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic13.jpg
new file mode 100755
index 0000000000..196b3750f6
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic13.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic14.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic14.jpg
new file mode 100644
index 0000000000..d179f64cab
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic14.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic15.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic15.jpg
new file mode 100644
index 0000000000..ac1e2d6d79
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic15.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic16.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic16.jpg
new file mode 100644
index 0000000000..f724220609
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic16.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic17.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic17.jpg
new file mode 100755
index 0000000000..42629015c4
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic17.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic18.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic18.jpg
new file mode 100755
index 0000000000..8279058654
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic18.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic19.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic19.jpg
new file mode 100755
index 0000000000..aaf4ad7ac1
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic19.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic2.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic2.jpg
new file mode 100644
index 0000000000..fbda283d0b
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic2.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic20.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic20.jpg
new file mode 100755
index 0000000000..9fbcc421ca
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic20.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic21.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic21.jpg
new file mode 100755
index 0000000000..2983d175db
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic21.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic22.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic22.jpg
new file mode 100644
index 0000000000..b8e083e8a9
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic22.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic23.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic23.jpg
new file mode 100755
index 0000000000..7a5ca3ccc6
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic23.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic24.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic24.jpg
new file mode 100755
index 0000000000..c1bd8e922e
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic24.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic25.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic25.jpg
new file mode 100755
index 0000000000..fe2083e33c
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic25.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic26.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic26.jpg
new file mode 100755
index 0000000000..0667ef69f8
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic26.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic27.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic27.jpg
new file mode 100755
index 0000000000..b8622fc7ab
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic27.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic28.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic28.jpg
new file mode 100755
index 0000000000..5c8b50bb51
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic28.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic29.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic29.jpg
new file mode 100755
index 0000000000..1dc9a30324
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic29.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic3.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic3.jpg
new file mode 100755
index 0000000000..bbd2a9ef78
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic3.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic30.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic30.jpg
new file mode 100644
index 0000000000..c07c03727e
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic30.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic4.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic4.jpg
new file mode 100644
index 0000000000..401d61c6c4
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic4.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic5.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic5.jpg
new file mode 100644
index 0000000000..b734e781c3
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic5.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic6.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic6.jpg
new file mode 100644
index 0000000000..f271eb16f3
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic6.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic7.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic7.jpg
new file mode 100644
index 0000000000..35a01130d2
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic7.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic8.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic8.jpg
new file mode 100644
index 0000000000..6bdf762f17
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic8.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/images/pic9.jpg b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic9.jpg
new file mode 100755
index 0000000000..1da27d7991
Binary files /dev/null and b/es_ES/_includes/code/animation/staggered_pic_selection/images/pic9.jpg differ
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/main.dart b/es_ES/_includes/code/animation/staggered_pic_selection/main.dart
new file mode 100644
index 0000000000..3c403d90e9
--- /dev/null
+++ b/es_ES/_includes/code/animation/staggered_pic_selection/main.dart
@@ -0,0 +1,374 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that
+// can be found in the LICENSE file.
+
+/*
+This app arranges its photos (allPhotos) in a list of blocks,
+where each block contains an arrangement of a handful of photos
+defined by photoBlockFrames.
+*/
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart' show timeDilation;
+
+class Photo {
+  const Photo(this.asset, this.id);
+  final String asset;
+  final int id;
+
+  @override
+  bool operator ==(dynamic other) {
+    if (runtimeType != other.runtimeType)
+      return false;
+    final Photo typedOther = other;
+    return id == typedOther.id;
+  }
+
+  @override
+  int get hashCode => id.hashCode;
+}
+
+final List<Photo> allPhotos = List<Photo>.generate(30, (int index) {
+  return Photo('images/pic${index+1}.jpg', index);
+});
+
+class PhotoFrame {
+  const PhotoFrame(this.width, this.height);
+  final double width;
+  final double height;
+}
+
+// Defines the app's repeating photo layout "block" in terms of
+// photoBlockFrames.length rows of photos.
+//
+// Each photoBlockFrames[i] item defines the layout of one row of photos
+// in terms  of their relative widgets and heights. In a row: widths must
+// sum to 1.0, heights must be the same.
+final List<List<PhotoFrame>> photoBlockFrames = [
+  [const PhotoFrame(1.0, 0.4)],
+  [const PhotoFrame(0.25, 0.3), const PhotoFrame(0.75, 0.3)],
+  [const PhotoFrame(0.75, 0.3), const PhotoFrame(0.25, 0.3)],
+];
+
+class PhotoCheck extends StatelessWidget {
+  const PhotoCheck({ Key key }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: Theme.of(context).primaryColor,
+        borderRadius: BorderRadius.all(const Radius.circular(16.0)),
+      ),
+      child: const Icon(
+        Icons.check,
+        size: 32.0,
+        color: Colors.white,
+      ),
+    );
+  }
+}
+
+class PhotoItem extends StatefulWidget {
+  PhotoItem({
+    Key key,
+    this.photo,
+    this.color,
+    this.onTap,
+    this.selected,
+  }) : super(key: key);
+
+  final Photo photo;
+  final Color color;
+  final VoidCallback onTap;
+  final bool selected;
+
+  @override
+  _PhotoItemState createState() => _PhotoItemState();
+}
+
+class _PhotoItemState extends State<PhotoItem> with TickerProviderStateMixin {
+
+  AnimationController _selectController;
+  Animation<double> _stackScaleAnimation;
+  Animation<RelativeRect> _imagePositionAnimation;
+  Animation<double> _checkScaleAnimation;
+  Animation<double> _checkSelectedOpacityAnimation;
+
+  AnimationController _replaceController;
+  Animation<Offset> _replaceNewPhotoAnimation;
+  Animation<Offset> _replaceOldPhotoAnimation;
+  Animation<double> _removeCheckAnimation;
+
+  Photo _oldPhoto;
+  Photo _newPhoto; // non-null during a remove animation
+
+  @override
+  void initState() {
+    super.initState();
+
+    _oldPhoto = widget.photo;
+
+    _selectController = AnimationController(
+      duration: const Duration(milliseconds: 300),
+      vsync: this
+    );
+    final Animation<double> easeSelection = CurvedAnimation(
+      parent: _selectController,
+      curve: Curves.easeIn,
+    );
+    _stackScaleAnimation = Tween<double>(begin: 1.0, end: 0.85).animate(easeSelection);
+    _checkScaleAnimation = Tween<double>(begin: 0.0, end: 1.25).animate(easeSelection);
+    _checkSelectedOpacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(easeSelection);
+    _imagePositionAnimation = RelativeRectTween(
+      begin: const RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0),
+      end: const RelativeRect.fromLTRB(12.0, 12.0, 12.0, 12.0),
+    ).animate(easeSelection);
+
+    _replaceController = AnimationController(
+      duration: const Duration(milliseconds: 300),
+      vsync: this
+    );
+
+    final Animation<double> easeInsert = CurvedAnimation(
+      parent: _replaceController,
+      curve: Curves.easeIn,
+    );
+
+    _replaceNewPhotoAnimation = Tween<Offset>(
+      begin: const Offset(1.0, 0.0),
+      end: Offset.zero,
+    ).animate(easeInsert);
+
+    _replaceOldPhotoAnimation = Tween<Offset>(
+      begin: const Offset(0.0, 0.0),
+      end: const Offset(-1.0, 0.0),
+    ).animate(easeInsert);
+
+    _removeCheckAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
+      CurvedAnimation(
+        parent: _replaceController,
+        curve: Interval(0.0, 0.25, curve: Curves.easeIn),
+      ),
+    );
+
+  }
+
+  @override
+  void dispose() {
+    _selectController.dispose();
+    _replaceController.dispose();
+    super.dispose();
+  }
+
+  @override
+  void didUpdateWidget(PhotoItem oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (widget.photo != oldWidget.photo)
+      _replace(oldWidget.photo, widget.photo);
+    if (widget.selected != oldWidget.selected)
+      _select();
+  }
+
+  Future<Null> _replace(Photo oldPhoto, Photo newPhoto) async {
+    try {
+      setState(() {
+        _oldPhoto = oldPhoto;
+        _newPhoto = newPhoto;
+      });
+      await _replaceController.forward().orCancel;
+      setState(() {
+        _oldPhoto = newPhoto;
+        _newPhoto = null;
+        _replaceController.value = 0.0;
+        _selectController.value = 0.0;
+      });
+    } on TickerCanceled {
+      print('canceled!'); //never reached...
+    }
+  }
+
+  void _select() {
+    if (widget.selected)
+      _selectController.forward();
+    else
+      _selectController.reverse();
+  }
+
+  Widget build(BuildContext context) {
+    return Stack(
+      children: <Widget>[
+        Positioned.fill(
+          child: ClipRect(
+            child: SlideTransition(
+              position: _replaceOldPhotoAnimation,
+              child: Material(
+                color: widget.color,
+                child: InkWell(
+                  onTap: widget.onTap,
+                  child: ScaleTransition(
+                    scale: _stackScaleAnimation,
+                    child: Stack(
+                      children: <Widget>[
+                        PositionedTransition(
+                          rect: _imagePositionAnimation,
+                          child: Image.asset(
+                            _oldPhoto.asset,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Positioned(
+                          top: 0.0,
+                          left: 0.0,
+                          child: FadeTransition(
+                            opacity: _checkSelectedOpacityAnimation,
+                            child: FadeTransition(
+                              opacity: _removeCheckAnimation,
+                              child: ScaleTransition(
+                                alignment: Alignment.topLeft,
+                                scale: _checkScaleAnimation,
+                                child: const PhotoCheck(),
+                              ),
+                            ),
+                          ),
+                        ),
+                        PositionedTransition(
+                          rect: _imagePositionAnimation,
+                          child: Container(
+                            margin: const EdgeInsets.all(8.0),
+                            alignment: Alignment.topRight,
+                            child: Text(
+                              widget.photo.id.toString(),
+                              style: TextStyle(color: Colors.green),
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+        Positioned.fill(
+          child: ClipRect(
+            child: SlideTransition(
+              position: _replaceNewPhotoAnimation,
+              child: _newPhoto == null ? null : Image.asset(
+                _newPhoto.asset,
+                fit: BoxFit.cover,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class ImagesDemo extends StatefulWidget {
+  @override
+  _ImagesDemoState createState() => _ImagesDemoState();
+}
+
+class _ImagesDemoState extends State<ImagesDemo> with SingleTickerProviderStateMixin {
+  static const double _photoBlockHeight = 576.0;
+
+  int _selectedPhotoIndex;
+
+  void _selectPhoto(int photoIndex) {
+    setState(() {
+      _selectedPhotoIndex = photoIndex == _selectedPhotoIndex ? null : photoIndex;
+    });
+  }
+
+  void _removeSelectedPhoto() {
+    if (_selectedPhotoIndex == null)
+      return;
+    setState(() {
+      allPhotos.removeAt(_selectedPhotoIndex);
+      _selectedPhotoIndex = null;
+    });
+  }
+
+  Widget _buildPhotoBlock(BuildContext context, int blockIndex, int blockFrameCount) {
+    final List<Widget> rows = [];
+
+    int startPhotoIndex = blockIndex * blockFrameCount;
+    final Color photoColor = Colors.grey[500];
+    for (int rowIndex = 0; rowIndex < photoBlockFrames.length; rowIndex += 1) {
+      final List<Widget> rowChildren = [];
+      final int rowLength = photoBlockFrames[rowIndex].length;
+      for (int frameIndex = 0; frameIndex < rowLength; frameIndex += 1) {
+        final PhotoFrame frame = photoBlockFrames[rowIndex][frameIndex];
+        final int photoIndex = startPhotoIndex + frameIndex;
+        rowChildren.add(
+          Expanded(
+            flex: (frame.width * 100.0).toInt(),
+            child: Container(
+              padding: const EdgeInsets.all(4.0),
+              height: frame.height * _photoBlockHeight,
+              child: PhotoItem(
+                photo: allPhotos[photoIndex],
+                color: photoColor,
+                selected: photoIndex == _selectedPhotoIndex,
+                onTap: () {
+                  _selectPhoto(photoIndex);
+                },
+              ),
+            ),
+          ),
+        );
+      }
+      rows.add(
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: rowChildren,
+        )
+      );
+      startPhotoIndex += rowLength;
+    }
+
+    return Column(
+      children: rows
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    timeDilation = 20.0; // 1.0 is normal animation speed.
+
+    // Number of PhotoBlockFrames in each _photoBlockHeight block
+    final int photoBlockFrameCount = photoBlockFrames.map((List<PhotoFrame> l) => l.length).reduce((s, n) => s + n);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Images Demo'),
+        actions: <Widget>[
+          IconButton(
+            icon: Icon(Icons.delete),
+            onPressed: _removeSelectedPhoto,
+          ),
+        ],
+      ),
+      body: SizedBox.expand(
+        child: ListView.builder(
+          padding: EdgeInsets.all(4.0),
+          itemExtent: _photoBlockHeight,
+          itemCount: (allPhotos.length / photoBlockFrameCount).floor(),
+          itemBuilder: (BuildContext context, int blockIndex) {
+            return _buildPhotoBlock(context, blockIndex, photoBlockFrameCount);
+          },
+        ),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(home: ImagesDemo()));
+}
diff --git a/es_ES/_includes/code/animation/staggered_pic_selection/pubspec.yaml b/es_ES/_includes/code/animation/staggered_pic_selection/pubspec.yaml
new file mode 100644
index 0000000000..bbfbae82dc
--- /dev/null
+++ b/es_ES/_includes/code/animation/staggered_pic_selection/pubspec.yaml
@@ -0,0 +1,45 @@
+name: staggered_pic_selection
+description: A new Flutter project.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pic1.jpg
+    - images/pic2.jpg
+    - images/pic3.jpg
+    - images/pic4.jpg
+    - images/pic5.jpg
+    - images/pic6.jpg
+    - images/pic7.jpg
+    - images/pic8.jpg
+    - images/pic9.jpg
+    - images/pic10.jpg
+    - images/pic11.jpg
+    - images/pic12.jpg
+    - images/pic13.jpg
+    - images/pic14.jpg
+    - images/pic15.jpg
+    - images/pic16.jpg
+    - images/pic17.jpg
+    - images/pic18.jpg
+    - images/pic19.jpg
+    - images/pic20.jpg
+    - images/pic21.jpg
+    - images/pic22.jpg
+    - images/pic23.jpg
+    - images/pic24.jpg
+    - images/pic25.jpg
+    - images/pic26.jpg
+    - images/pic27.jpg
+    - images/pic28.jpg
+    - images/pic29.jpg
+    - images/pic30.jpg
+
diff --git a/es_ES/_includes/code/internationalization/intl/analysis_options.yaml b/es_ES/_includes/code/internationalization/intl/analysis_options.yaml
new file mode 100644
index 0000000000..120d6e4447
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/analysis_options.yaml
@@ -0,0 +1,7 @@
+include: package:flutter/analysis_options_user.yaml
+
+# TODO: Remove these excludes when https://github.com/flutter/flutter/issues/12726 is fixed.
+analyzer:
+  errors:
+    unused_element: ignore
+    non_constant_identifier_names: ignore
diff --git a/es_ES/_includes/code/internationalization/intl/l10n/intl_en.arb b/es_ES/_includes/code/internationalization/intl/l10n/intl_en.arb
new file mode 100644
index 0000000000..8530ccaad3
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/l10n/intl_en.arb
@@ -0,0 +1,7 @@
+{
+  "title": "Hello World",
+  "@title": {
+    "description": "Title for the Demo application",
+    "type": "text"
+  }
+}
diff --git a/es_ES/_includes/code/internationalization/intl/l10n/intl_es.arb b/es_ES/_includes/code/internationalization/intl/l10n/intl_es.arb
new file mode 100644
index 0000000000..2d94494ee3
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/l10n/intl_es.arb
@@ -0,0 +1,7 @@
+{
+  "title": "Hola Mundo",
+  "@title": {
+    "description": "Title for the Demo application",
+    "type": "text"
+  }
+}
diff --git a/es_ES/_includes/code/internationalization/intl/l10n/intl_messages.arb b/es_ES/_includes/code/internationalization/intl/l10n/intl_messages.arb
new file mode 100644
index 0000000000..893cfacf72
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/l10n/intl_messages.arb
@@ -0,0 +1 @@
+{"title":"Hello World","@title":{"description":"Title for the Demo application","type":"text","placeholders":{}}}
\ No newline at end of file
diff --git a/es_ES/_includes/code/internationalization/intl/l10n/messages_all.dart b/es_ES/_includes/code/internationalization/intl/l10n/messages_all.dart
new file mode 100644
index 0000000000..7a8b08197b
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/l10n/messages_all.dart
@@ -0,0 +1,56 @@
+// DO NOT EDIT. This is code generated via package:intl/generate_localized.dart
+// This is a library that looks up messages for specific locales by
+// delegating to the appropriate library.
+
+import 'dart:async';
+
+import 'package:intl/intl.dart';
+import 'package:intl/message_lookup_by_library.dart';
+import 'package:intl/src/intl_helpers.dart';
+
+import 'messages_en.dart' as messages_en;
+import 'messages_es.dart' as messages_es;
+import 'messages_messages.dart' as messages_messages;
+
+typedef Future<dynamic> LibraryLoader();
+Map<String, LibraryLoader> _deferredLibraries = {
+  'en': () => Future.value(null),
+  'es': () => Future.value(null),
+  'messages': () => Future.value(null),
+};
+
+MessageLookupByLibrary _findExact(localeName) {
+  switch (localeName) {
+    case 'en':
+      return messages_en.messages;
+    case 'es':
+      return messages_es.messages;
+    case 'messages':
+      return messages_messages.messages;
+    default:
+      return null;
+  }
+}
+
+/// User programs should call this before using [localeName] for messages.
+Future initializeMessages(String localeName) async {
+  var lib = _deferredLibraries[Intl.canonicalizedLocale(localeName)];
+  await (lib == null ? Future.value(false) : lib());
+  initializeInternalMessageLookup(() => CompositeMessageLookup());
+  messageLookup.addLocale(localeName, _findGeneratedMessagesFor);
+}
+
+bool _messagesExistFor(String locale) {
+  try {
+    return _findExact(locale) != null;
+  } catch (e) {
+    return false;
+  }
+}
+
+MessageLookupByLibrary _findGeneratedMessagesFor(locale) {
+  var actualLocale = Intl.verifiedLocale(locale, _messagesExistFor,
+      onFailure: (_) => null);
+  if (actualLocale == null) return null;
+  return _findExact(actualLocale);
+}
diff --git a/es_ES/_includes/code/internationalization/intl/l10n/messages_en.dart b/es_ES/_includes/code/internationalization/intl/l10n/messages_en.dart
new file mode 100644
index 0000000000..86194f5c29
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/l10n/messages_en.dart
@@ -0,0 +1,22 @@
+// DO NOT EDIT. This is code generated via package:intl/generate_localized.dart
+// This is a library that provides messages for a en locale. All the
+// messages from the main program should be duplicated here with the same
+// function name.
+
+import 'package:intl/intl.dart';
+import 'package:intl/message_lookup_by_library.dart';
+
+final messages = MessageLookup();
+
+final _keepAnalysisHappy = Intl.defaultLocale;
+
+typedef MessageIfAbsent(String message_str, List args);
+
+class MessageLookup extends MessageLookupByLibrary {
+  get localeName => 'en';
+
+  final messages = _notInlinedMessages(_notInlinedMessages);
+  static _notInlinedMessages(_) => {
+    "title" : MessageLookupByLibrary.simpleMessage("Hello World")
+  };
+}
diff --git a/es_ES/_includes/code/internationalization/intl/l10n/messages_es.dart b/es_ES/_includes/code/internationalization/intl/l10n/messages_es.dart
new file mode 100644
index 0000000000..6fcc1d6160
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/l10n/messages_es.dart
@@ -0,0 +1,22 @@
+// DO NOT EDIT. This is code generated via package:intl/generate_localized.dart
+// This is a library that provides messages for a es locale. All the
+// messages from the main program should be duplicated here with the same
+// function name.
+
+import 'package:intl/intl.dart';
+import 'package:intl/message_lookup_by_library.dart';
+
+final messages = MessageLookup();
+
+final _keepAnalysisHappy = Intl.defaultLocale;
+
+typedef MessageIfAbsent(String message_str, List args);
+
+class MessageLookup extends MessageLookupByLibrary {
+  get localeName => 'es';
+
+  final messages = _notInlinedMessages(_notInlinedMessages);
+  static _notInlinedMessages(_) => {
+    "title" : MessageLookupByLibrary.simpleMessage("Hola Mundo")
+  };
+}
diff --git a/es_ES/_includes/code/internationalization/intl/l10n/messages_messages.dart b/es_ES/_includes/code/internationalization/intl/l10n/messages_messages.dart
new file mode 100644
index 0000000000..bad302757f
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/l10n/messages_messages.dart
@@ -0,0 +1,22 @@
+// DO NOT EDIT. This is code generated via package:intl/generate_localized.dart
+// This is a library that provides messages for a messages locale. All the
+// messages from the main program should be duplicated here with the same
+// function name.
+
+import 'package:intl/intl.dart';
+import 'package:intl/message_lookup_by_library.dart';
+
+final messages = MessageLookup();
+
+final _keepAnalysisHappy = Intl.defaultLocale;
+
+typedef MessageIfAbsent(String message_str, List args);
+
+class MessageLookup extends MessageLookupByLibrary {
+  get localeName => 'messages';
+
+  final messages = _notInlinedMessages(_notInlinedMessages);
+  static _notInlinedMessages(_) => {
+    "title" : MessageLookupByLibrary.simpleMessage("Hello World")
+  };
+}
diff --git a/es_ES/_includes/code/internationalization/intl/main.dart b/es_ES/_includes/code/internationalization/intl/main.dart
new file mode 100644
index 0000000000..ed2b1ed36b
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/main.dart
@@ -0,0 +1,122 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// A simple example of localizing a Flutter app written with the
+// Dart intl package (see https://pub.dartlang.org/packages/intl).
+//
+// Spanish and English (locale language codes 'en' and 'es') are
+// supported.
+
+// The pubspec.yaml file must include flutter_localizations and the
+// Dart intl packages in its dependencies section. For example:
+//
+// dependencies:
+//   flutter:
+//   sdk: flutter
+//  flutter_localizations:
+//    sdk: flutter
+//  intl: 0.15.1
+//  intl_translation: 0.15.0
+
+// If you run this app with the device's locale set to anything but
+// English or Spanish, the app's locale will be English. If you
+// set the device's locale to Spanish, the app's locale will be
+// Spanish.
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:intl/intl.dart';
+
+// This file was generated in two steps, using the Dart intl tools. With the
+// app's root directory (the one that contains pubspec.yaml) as the current
+// directory:
+//
+// flutter pub get
+// flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/main.dart
+// flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/main.dart lib/l10n/intl_*.arb
+//
+// The second command generates intl_messages.arb and the third generates
+// messages_all.dart. There's more about this process in
+// https://pub.dartlang.org/packages/intl.
+import 'l10n/messages_all.dart';
+
+class DemoLocalizations {
+  static Future<DemoLocalizations> load(Locale locale) {
+    final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
+    final String localeName = Intl.canonicalizedLocale(name);
+
+    return initializeMessages(localeName).then((_) {
+      Intl.defaultLocale = localeName;
+      return DemoLocalizations();
+    });
+  }
+
+  static DemoLocalizations of(BuildContext context) {
+    return Localizations.of<DemoLocalizations>(context, DemoLocalizations);
+  }
+
+  String get title {
+    return Intl.message(
+      'Hello World',
+      name: 'title',
+      desc: 'Title for the Demo application',
+    );
+  }
+}
+
+class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations> {
+  const DemoLocalizationsDelegate();
+
+  @override
+  bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
+
+  @override
+  Future<DemoLocalizations> load(Locale locale) => DemoLocalizations.load(locale);
+
+  @override
+  bool shouldReload(DemoLocalizationsDelegate old) => false;
+}
+
+class DemoApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(DemoLocalizations.of(context).title),
+      ),
+      body: Center(
+        child: Text(DemoLocalizations.of(context).title),
+      ),
+    );
+  }
+}
+
+class Demo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      onGenerateTitle: (BuildContext context) => DemoLocalizations.of(context).title,
+      localizationsDelegates: [
+        const DemoLocalizationsDelegate(),
+        GlobalMaterialLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+      ],
+      supportedLocales: [
+        const Locale('en', ''),
+        const Locale('es', ''),
+      ],
+      // Watch out: MaterialApp creates a Localizations widget
+      // with the specified delegates. DemoLocalizations.of()
+      // will only find the app's Localizations widget if its
+      // context is a child of the app.
+      home: DemoApp(),
+    );
+  }
+}
+
+void main() {
+  runApp(Demo());
+}
diff --git a/es_ES/_includes/code/internationalization/intl/pubspec.yaml b/es_ES/_includes/code/internationalization/intl/pubspec.yaml
new file mode 100644
index 0000000000..a57c967fb1
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/intl/pubspec.yaml
@@ -0,0 +1,13 @@
+name: l10n_example
+description: A minimal example of a localized Flutter app
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_localizations:
+    sdk: flutter
+  intl:
+  intl_translation:
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/internationalization/minimal/main.dart b/es_ES/_includes/code/internationalization/minimal/main.dart
new file mode 100644
index 0000000000..94ed976383
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/minimal/main.dart
@@ -0,0 +1,108 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// A simple "rough and ready" example of localizing a Flutter app.
+// Spanish and English (locale language codes 'en' and 'es') are
+// supported.
+
+// The pubspec.yaml file must include flutter_localizations in its
+// dependencies section. For example:
+//
+// dependencies:
+//   flutter:
+//   sdk: flutter
+//  flutter_localizations:
+//    sdk: flutter
+
+// If you run this app with the device's locale set to anything but
+// English or Spanish, the app's locale will be English. If you
+// set the device's locale to Spanish, the app's locale will be
+// Spanish.
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart' show SynchronousFuture;
+import 'package:flutter_localizations/flutter_localizations.dart';
+
+class DemoLocalizations {
+  DemoLocalizations(this.locale);
+
+  final Locale locale;
+
+  static DemoLocalizations of(BuildContext context) {
+    return Localizations.of<DemoLocalizations>(context, DemoLocalizations);
+  }
+
+  static Map<String, Map<String, String>> _localizedValues = {
+    'en': {
+      'title': 'Hello World',
+    },
+    'es': {
+      'title': 'Hola Mundo',
+    },
+  };
+
+  String get title {
+    return _localizedValues[locale.languageCode]['title'];
+  }
+}
+
+class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations> {
+  const DemoLocalizationsDelegate();
+
+  @override
+  bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
+
+  @override
+  Future<DemoLocalizations> load(Locale locale) {
+    // Returning a SynchronousFuture here because an async "load" operation
+    // isn't needed to produce an instance of DemoLocalizations.
+    return SynchronousFuture<DemoLocalizations>(DemoLocalizations(locale));
+  }
+
+  @override
+  bool shouldReload(DemoLocalizationsDelegate old) => false;
+}
+
+class DemoApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(DemoLocalizations.of(context).title),
+      ),
+      body: Center(
+        child: Text(DemoLocalizations.of(context).title),
+      ),
+    );
+  }
+}
+
+class Demo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      onGenerateTitle: (BuildContext context) => DemoLocalizations.of(context).title,
+      localizationsDelegates: [
+        const DemoLocalizationsDelegate(),
+        GlobalMaterialLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+      ],
+      supportedLocales: [
+        const Locale('en', ''),
+        const Locale('es', ''),
+      ],
+      // Watch out: MaterialApp creates a Localizations widget
+      // with the specified delegates. DemoLocalizations.of()
+      // will only find the app's Localizations widget if its
+      // context is a child of the app.
+      home: DemoApp(),
+    );
+  }
+}
+
+void main() {
+  runApp(Demo());
+}
diff --git a/es_ES/_includes/code/internationalization/minimal/pubspec.yaml b/es_ES/_includes/code/internationalization/minimal/pubspec.yaml
new file mode 100644
index 0000000000..27d090c71e
--- /dev/null
+++ b/es_ES/_includes/code/internationalization/minimal/pubspec.yaml
@@ -0,0 +1,11 @@
+name: l10n_example
+description: A minimal example of a localized Flutter app
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_localizations:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/layout/card/.gitignore b/es_ES/_includes/code/layout/card/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/card/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/card/main.dart b/es_ES/_includes/code/layout/card/main.dart
new file mode 100644
index 0000000000..e5fa24fce9
--- /dev/null
+++ b/es_ES/_includes/code/layout/card/main.dart
@@ -0,0 +1,83 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 7 and 10 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    var card = SizedBox(
+      height: 210.0,
+      child: Card(
+        child: Column(
+          children: [
+            ListTile(
+              title: Text('1625 Main Street',
+                  style: TextStyle(fontWeight: FontWeight.w500)),
+              subtitle: Text('My City, CA 99984'),
+              leading: Icon(
+                Icons.restaurant_menu,
+                color: Colors.blue[500],
+              ),
+            ),
+            Divider(),
+            ListTile(
+              title: Text('(408) 555-1212',
+                  style: TextStyle(fontWeight: FontWeight.w500)),
+              leading: Icon(
+                Icons.contact_phone,
+                color: Colors.blue[500],
+              ),
+            ),
+            ListTile(
+              title: Text('costa@example.com'),
+              leading: Icon(
+                Icons.contact_mail,
+                color: Colors.blue[500],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: card,
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/card/pubspec.yaml b/es_ES/_includes/code/layout/card/pubspec.yaml
new file mode 100644
index 0000000000..c82b0b8882
--- /dev/null
+++ b/es_ES/_includes/code/layout/card/pubspec.yaml
@@ -0,0 +1,9 @@
+name: card
+description: Demonstrates the Card widget.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/layout/column/.gitignore b/es_ES/_includes/code/layout/column/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/column/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/column/images/pic1.jpg b/es_ES/_includes/code/layout/column/images/pic1.jpg
new file mode 100755
index 0000000000..bf2d3293b5
Binary files /dev/null and b/es_ES/_includes/code/layout/column/images/pic1.jpg differ
diff --git a/es_ES/_includes/code/layout/column/images/pic2.jpg b/es_ES/_includes/code/layout/column/images/pic2.jpg
new file mode 100755
index 0000000000..3fd929a9db
Binary files /dev/null and b/es_ES/_includes/code/layout/column/images/pic2.jpg differ
diff --git a/es_ES/_includes/code/layout/column/images/pic3.jpg b/es_ES/_includes/code/layout/column/images/pic3.jpg
new file mode 100755
index 0000000000..85905ab1b7
Binary files /dev/null and b/es_ES/_includes/code/layout/column/images/pic3.jpg differ
diff --git a/es_ES/_includes/code/layout/column/main.dart b/es_ES/_includes/code/layout/column/main.dart
new file mode 100644
index 0000000000..1d4dfe83e8
--- /dev/null
+++ b/es_ES/_includes/code/layout/column/main.dart
@@ -0,0 +1,55 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Comment out lines 7 and 10 to suppress the visual layout at runtime.
+import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            Image.asset('images/pic1.jpg'),
+            Image.asset('images/pic2.jpg'),
+            Image.asset('images/pic3.jpg'),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/column/pubspec.yaml b/es_ES/_includes/code/layout/column/pubspec.yaml
new file mode 100644
index 0000000000..ff9d5f0fff
--- /dev/null
+++ b/es_ES/_includes/code/layout/column/pubspec.yaml
@@ -0,0 +1,13 @@
+name: column
+description: Demonstrates the column widget.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pic1.jpg
+    - images/pic2.jpg
+    - images/pic3.jpg
diff --git a/es_ES/_includes/code/layout/container/.gitignore b/es_ES/_includes/code/layout/container/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/container/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/container/images/pic1.jpg b/es_ES/_includes/code/layout/container/images/pic1.jpg
new file mode 100755
index 0000000000..c1bd8e922e
Binary files /dev/null and b/es_ES/_includes/code/layout/container/images/pic1.jpg differ
diff --git a/es_ES/_includes/code/layout/container/images/pic2.jpg b/es_ES/_includes/code/layout/container/images/pic2.jpg
new file mode 100755
index 0000000000..bbd2a9ef78
Binary files /dev/null and b/es_ES/_includes/code/layout/container/images/pic2.jpg differ
diff --git a/es_ES/_includes/code/layout/container/images/pic3.jpg b/es_ES/_includes/code/layout/container/images/pic3.jpg
new file mode 100644
index 0000000000..ac1e2d6d79
Binary files /dev/null and b/es_ES/_includes/code/layout/container/images/pic3.jpg differ
diff --git a/es_ES/_includes/code/layout/container/images/pic4.jpg b/es_ES/_includes/code/layout/container/images/pic4.jpg
new file mode 100644
index 0000000000..fbda283d0b
Binary files /dev/null and b/es_ES/_includes/code/layout/container/images/pic4.jpg differ
diff --git a/es_ES/_includes/code/layout/container/main.dart b/es_ES/_includes/code/layout/container/main.dart
new file mode 100644
index 0000000000..3d863d116e
--- /dev/null
+++ b/es_ES/_includes/code/layout/container/main.dart
@@ -0,0 +1,110 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 7 and 10 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    var container = Container(
+      decoration: BoxDecoration(
+        color: Colors.black26,
+      ),
+      child: Column(
+        children: [
+          Row(
+            children: [
+              Expanded(
+                child: Container(
+                  decoration: BoxDecoration(
+                    border: Border.all(width: 10.0, color: Colors.black38),
+                    borderRadius:
+                        const BorderRadius.all(const Radius.circular(8.0)),
+                  ),
+                  margin: const EdgeInsets.all(4.0),
+                  child: Image.asset('images/pic1.jpg'),
+                ),
+              ),
+              Expanded(
+                child: Container(
+                  decoration: BoxDecoration(
+                    border: Border.all(width: 10.0, color: Colors.black38),
+                    borderRadius:
+                        const BorderRadius.all(const Radius.circular(8.0)),
+                  ),
+                  margin: const EdgeInsets.all(4.0),
+                  child: Image.asset('images/pic2.jpg'),
+                ),
+              ),
+            ],
+          ),
+          Row(
+            children: [
+              Expanded(
+                child: Container(
+                  decoration: BoxDecoration(
+                    border: Border.all(width: 10.0, color: Colors.black38),
+                    borderRadius:
+                        const BorderRadius.all(const Radius.circular(8.0)),
+                  ),
+                  margin: const EdgeInsets.all(4.0),
+                  child: Image.asset('images/pic3.jpg'),
+                ),
+              ),
+              Expanded(
+                child: Container(
+                  decoration: BoxDecoration(
+                    border: Border.all(width: 10.0, color: Colors.black38),
+                    borderRadius:
+                        const BorderRadius.all(const Radius.circular(8.0)),
+                  ),
+                  margin: const EdgeInsets.all(4.0),
+                  child: Image.asset('images/pic4.jpg'),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: container,
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/container/pubspec.yaml b/es_ES/_includes/code/layout/container/pubspec.yaml
new file mode 100644
index 0000000000..1b7bf74e6f
--- /dev/null
+++ b/es_ES/_includes/code/layout/container/pubspec.yaml
@@ -0,0 +1,14 @@
+name: container
+description: Demonstrates the Container widget.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pic1.jpg
+    - images/pic2.jpg
+    - images/pic3.jpg
+    - images/pic4.jpg
diff --git a/es_ES/_includes/code/layout/grid/.gitignore b/es_ES/_includes/code/layout/grid/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/grid/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/grid/images/pic1.jpg b/es_ES/_includes/code/layout/grid/images/pic1.jpg
new file mode 100644
index 0000000000..87f0cae26f
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic1.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic10.jpg b/es_ES/_includes/code/layout/grid/images/pic10.jpg
new file mode 100644
index 0000000000..68d4d1d5e0
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic10.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic11.jpg b/es_ES/_includes/code/layout/grid/images/pic11.jpg
new file mode 100644
index 0000000000..a91e135f6a
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic11.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic12.jpg b/es_ES/_includes/code/layout/grid/images/pic12.jpg
new file mode 100644
index 0000000000..9ca2b51c7c
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic12.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic13.jpg b/es_ES/_includes/code/layout/grid/images/pic13.jpg
new file mode 100755
index 0000000000..196b3750f6
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic13.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic14.jpg b/es_ES/_includes/code/layout/grid/images/pic14.jpg
new file mode 100644
index 0000000000..d179f64cab
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic14.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic15.jpg b/es_ES/_includes/code/layout/grid/images/pic15.jpg
new file mode 100644
index 0000000000..ac1e2d6d79
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic15.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic16.jpg b/es_ES/_includes/code/layout/grid/images/pic16.jpg
new file mode 100644
index 0000000000..f724220609
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic16.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic17.jpg b/es_ES/_includes/code/layout/grid/images/pic17.jpg
new file mode 100755
index 0000000000..42629015c4
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic17.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic18.jpg b/es_ES/_includes/code/layout/grid/images/pic18.jpg
new file mode 100755
index 0000000000..8279058654
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic18.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic19.jpg b/es_ES/_includes/code/layout/grid/images/pic19.jpg
new file mode 100755
index 0000000000..aaf4ad7ac1
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic19.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic2.jpg b/es_ES/_includes/code/layout/grid/images/pic2.jpg
new file mode 100644
index 0000000000..fbda283d0b
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic2.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic20.jpg b/es_ES/_includes/code/layout/grid/images/pic20.jpg
new file mode 100755
index 0000000000..9fbcc421ca
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic20.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic21.jpg b/es_ES/_includes/code/layout/grid/images/pic21.jpg
new file mode 100755
index 0000000000..2983d175db
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic21.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic22.jpg b/es_ES/_includes/code/layout/grid/images/pic22.jpg
new file mode 100644
index 0000000000..b8e083e8a9
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic22.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic23.jpg b/es_ES/_includes/code/layout/grid/images/pic23.jpg
new file mode 100755
index 0000000000..7a5ca3ccc6
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic23.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic24.jpg b/es_ES/_includes/code/layout/grid/images/pic24.jpg
new file mode 100755
index 0000000000..c1bd8e922e
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic24.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic25.jpg b/es_ES/_includes/code/layout/grid/images/pic25.jpg
new file mode 100755
index 0000000000..fe2083e33c
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic25.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic26.jpg b/es_ES/_includes/code/layout/grid/images/pic26.jpg
new file mode 100755
index 0000000000..0667ef69f8
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic26.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic27.jpg b/es_ES/_includes/code/layout/grid/images/pic27.jpg
new file mode 100755
index 0000000000..b8622fc7ab
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic27.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic28.jpg b/es_ES/_includes/code/layout/grid/images/pic28.jpg
new file mode 100755
index 0000000000..5c8b50bb51
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic28.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic29.jpg b/es_ES/_includes/code/layout/grid/images/pic29.jpg
new file mode 100755
index 0000000000..1dc9a30324
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic29.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic3.jpg b/es_ES/_includes/code/layout/grid/images/pic3.jpg
new file mode 100755
index 0000000000..bbd2a9ef78
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic3.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic30.jpg b/es_ES/_includes/code/layout/grid/images/pic30.jpg
new file mode 100644
index 0000000000..c07c03727e
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic30.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic4.jpg b/es_ES/_includes/code/layout/grid/images/pic4.jpg
new file mode 100644
index 0000000000..c4a8336f01
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic4.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic5.jpg b/es_ES/_includes/code/layout/grid/images/pic5.jpg
new file mode 100644
index 0000000000..b734e781c3
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic5.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic6.jpg b/es_ES/_includes/code/layout/grid/images/pic6.jpg
new file mode 100644
index 0000000000..f271eb16f3
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic6.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic7.jpg b/es_ES/_includes/code/layout/grid/images/pic7.jpg
new file mode 100644
index 0000000000..35a01130d2
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic7.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic8.jpg b/es_ES/_includes/code/layout/grid/images/pic8.jpg
new file mode 100644
index 0000000000..1e94f2fe27
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic8.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/images/pic9.jpg b/es_ES/_includes/code/layout/grid/images/pic9.jpg
new file mode 100755
index 0000000000..1da27d7991
Binary files /dev/null and b/es_ES/_includes/code/layout/grid/images/pic9.jpg differ
diff --git a/es_ES/_includes/code/layout/grid/main.dart b/es_ES/_includes/code/layout/grid/main.dart
new file mode 100644
index 0000000000..15bad2c302
--- /dev/null
+++ b/es_ES/_includes/code/layout/grid/main.dart
@@ -0,0 +1,68 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 7 and 10 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+// The images are saved with names pic1.jpg, pic2.jpg...pic30.jpg.
+// The List.generate constructor allows an easy way to create
+// a list when objects have a predictable naming pattern.
+List<Container> _buildGridTileList(int count) {
+  List<Container> containers = List<Container>.generate(
+      count,
+      (int index) =>
+          Container(child: Image.asset('images/pic${index+1}.jpg')));
+  return containers;
+}
+
+Widget buildGrid() {
+  return GridView.extent(
+      maxCrossAxisExtent: 150.0,
+      padding: const EdgeInsets.all(4.0),
+      mainAxisSpacing: 4.0,
+      crossAxisSpacing: 4.0,
+      children: _buildGridTileList(30));
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: buildGrid(),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/grid/pubspec.yaml b/es_ES/_includes/code/layout/grid/pubspec.yaml
new file mode 100644
index 0000000000..d07e095499
--- /dev/null
+++ b/es_ES/_includes/code/layout/grid/pubspec.yaml
@@ -0,0 +1,40 @@
+name: grid
+description: Demonstrates GridView.extent.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pic1.jpg
+    - images/pic2.jpg
+    - images/pic3.jpg
+    - images/pic4.jpg
+    - images/pic5.jpg
+    - images/pic6.jpg
+    - images/pic7.jpg
+    - images/pic8.jpg
+    - images/pic9.jpg
+    - images/pic10.jpg
+    - images/pic11.jpg
+    - images/pic12.jpg
+    - images/pic13.jpg
+    - images/pic14.jpg
+    - images/pic15.jpg
+    - images/pic16.jpg
+    - images/pic17.jpg
+    - images/pic18.jpg
+    - images/pic19.jpg
+    - images/pic20.jpg
+    - images/pic21.jpg
+    - images/pic22.jpg
+    - images/pic23.jpg
+    - images/pic24.jpg
+    - images/pic25.jpg
+    - images/pic26.jpg
+    - images/pic27.jpg
+    - images/pic28.jpg
+    - images/pic29.jpg
+    - images/pic30.jpg
diff --git a/es_ES/_includes/code/layout/hello-world/main.dart b/es_ES/_includes/code/layout/hello-world/main.dart
new file mode 100644
index 0000000000..ff2ce532d5
--- /dev/null
+++ b/es_ES/_includes/code/layout/hello-world/main.dart
@@ -0,0 +1,45 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: Text('Hello World'),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/hello-world/pubspec.yaml b/es_ES/_includes/code/layout/hello-world/pubspec.yaml
new file mode 100644
index 0000000000..b47a74af2c
--- /dev/null
+++ b/es_ES/_includes/code/layout/hello-world/pubspec.yaml
@@ -0,0 +1,9 @@
+name: hello_world
+description: Demonstrates a basic "Hello World" material app.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/layout/lakes-interactive/.gitignore b/es_ES/_includes/code/layout/lakes-interactive/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/lakes-interactive/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/lakes-interactive/images/lake.jpg b/es_ES/_includes/code/layout/lakes-interactive/images/lake.jpg
new file mode 100644
index 0000000000..ce5e96b757
Binary files /dev/null and b/es_ES/_includes/code/layout/lakes-interactive/images/lake.jpg differ
diff --git a/es_ES/_includes/code/layout/lakes-interactive/main.dart b/es_ES/_includes/code/layout/lakes-interactive/main.dart
new file mode 100644
index 0000000000..9a610b8b15
--- /dev/null
+++ b/es_ES/_includes/code/layout/lakes-interactive/main.dart
@@ -0,0 +1,161 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 7 and 10 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class FavoriteWidget extends StatefulWidget {
+  @override
+  _FavoriteWidgetState createState() => _FavoriteWidgetState();
+}
+
+class _FavoriteWidgetState extends State<FavoriteWidget> {
+  bool _isFavorited = true;
+  int _favoriteCount = 41;
+
+  void _toggleFavorite() {
+    setState(() {
+      // If the lake is currently favorited, unfavorite it.
+      if (_isFavorited) {
+        _favoriteCount -= 1;
+        _isFavorited = false;
+        // Otherwise, favorite it.
+      } else {
+        _favoriteCount += 1;
+        _isFavorited = true;
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          padding: EdgeInsets.all(0.0),
+          child: IconButton(
+            icon: (_isFavorited
+                ? Icon(Icons.star)
+                : Icon(Icons.star_border)),
+            color: Colors.red[500],
+            onPressed: _toggleFavorite,
+          ),
+        ),
+        SizedBox(
+          width: 18.0,
+          child: Container(
+            child: Text('$_favoriteCount'),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    Widget titleSection = Container(
+      padding: const EdgeInsets.all(32.0),
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Container(
+                  padding: const EdgeInsets.only(bottom: 8.0),
+                  child: Text(
+                    'Oeschinen Lake Campground',
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                Text(
+                  'Kandersteg, Switzerland',
+                  style: TextStyle(
+                    color: Colors.grey[500],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          FavoriteWidget(),
+        ],
+      ),
+    );
+
+    Column buildButtonColumn(IconData icon, String label) {
+      Color color = Theme.of(context).primaryColor;
+
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(icon, color: color),
+          Container(
+            margin: const EdgeInsets.only(top: 8.0),
+            child: Text(
+              label,
+              style: TextStyle(
+                fontSize: 12.0,
+                fontWeight: FontWeight.w400,
+                color: color,
+              ),
+            ),
+          ),
+        ],
+      );
+    }
+
+    Widget buttonSection = Container(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          buildButtonColumn(Icons.call, 'CALL'),
+          buildButtonColumn(Icons.near_me, 'ROUTE'),
+          buildButtonColumn(Icons.share, 'SHARE'),
+        ],
+      ),
+    );
+
+    Widget textSection = Container(
+      padding: const EdgeInsets.all(32.0),
+      child: Text(
+        '''
+Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
+        ''',
+        softWrap: true,
+      ),
+    );
+    return MaterialApp(
+      title: 'Flutter Demo',
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Top Lakes'),
+        ),
+        body: ListView(
+          children: [
+            Image.asset(
+              'images/lake.jpg',
+              height: 240.0,
+              fit: BoxFit.cover,
+            ),
+            titleSection,
+            buttonSection,
+            textSection,
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/lakes-interactive/pubspec.yaml b/es_ES/_includes/code/layout/lakes-interactive/pubspec.yaml
new file mode 100644
index 0000000000..cfa36006dc
--- /dev/null
+++ b/es_ES/_includes/code/layout/lakes-interactive/pubspec.yaml
@@ -0,0 +1,11 @@
+name: lakes_interactive
+description: Demonstrates adding interactivity to the "Lakes" app.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/lake.jpg
diff --git a/es_ES/_includes/code/layout/lakes/.gitignore b/es_ES/_includes/code/layout/lakes/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/lakes/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/lakes/images/lake.jpg b/es_ES/_includes/code/layout/lakes/images/lake.jpg
new file mode 100644
index 0000000000..aa9e06037a
Binary files /dev/null and b/es_ES/_includes/code/layout/lakes/images/lake.jpg differ
diff --git a/es_ES/_includes/code/layout/lakes/main.dart b/es_ES/_includes/code/layout/lakes/main.dart
new file mode 100644
index 0000000000..91f1956470
--- /dev/null
+++ b/es_ES/_includes/code/layout/lakes/main.dart
@@ -0,0 +1,118 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 7 and 10 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    Widget titleSection = Container(
+      padding: const EdgeInsets.all(32.0),
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Container(
+                  padding: const EdgeInsets.only(bottom: 8.0),
+                  child: Text(
+                    'Oeschinen Lake Campground',
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                Text(
+                  'Kandersteg, Switzerland',
+                  style: TextStyle(
+                    color: Colors.grey[500],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Icon(
+            Icons.star,
+            color: Colors.red[500],
+          ),
+          Text('41'),
+        ],
+      ),
+    );
+
+    Column buildButtonColumn(IconData icon, String label) {
+      Color color = Theme.of(context).primaryColor;
+
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(icon, color: color),
+          Container(
+            margin: const EdgeInsets.only(top: 8.0),
+            child: Text(
+              label,
+              style: TextStyle(
+                fontSize: 12.0,
+                fontWeight: FontWeight.w400,
+                color: color,
+              ),
+            ),
+          ),
+        ],
+      );
+    }
+
+    Widget buttonSection = Container(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          buildButtonColumn(Icons.call, 'CALL'),
+          buildButtonColumn(Icons.near_me, 'ROUTE'),
+          buildButtonColumn(Icons.share, 'SHARE'),
+        ],
+      ),
+    );
+
+    Widget textSection = Container(
+      padding: const EdgeInsets.all(32.0),
+      child: Text(
+        '''
+Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
+        ''',
+        softWrap: true,
+      ),
+    );
+
+    return MaterialApp(
+      title: 'Flutter Demo',
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Top Lakes'),
+        ),
+        body: ListView(
+          children: [
+            Image.asset(
+              'images/lake.jpg',
+              width: 600.0,
+              height: 240.0,
+              fit: BoxFit.cover,
+            ),
+            titleSection,
+            buttonSection,
+            textSection,
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/lakes/pubspec.yaml b/es_ES/_includes/code/layout/lakes/pubspec.yaml
new file mode 100644
index 0000000000..4ac7e05a4b
--- /dev/null
+++ b/es_ES/_includes/code/layout/lakes/pubspec.yaml
@@ -0,0 +1,11 @@
+name: lakes
+description: Demonstrates building a layout for the "Lakes" app.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/lake.jpg
diff --git a/es_ES/_includes/code/layout/listview/.gitignore b/es_ES/_includes/code/layout/listview/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/listview/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/listview/main.dart b/es_ES/_includes/code/layout/listview/main.dart
new file mode 100644
index 0000000000..21b0a95f80
--- /dev/null
+++ b/es_ES/_includes/code/layout/listview/main.dart
@@ -0,0 +1,145 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 7 and 10 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+List<Widget> list = <Widget>[
+  ListTile(
+    title: Text('CineArts at the Empire',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('85 W Portal Ave'),
+    leading: Icon(
+      Icons.theaters,
+      color: Colors.blue[500],
+    ),
+  ),
+  ListTile(
+    title: Text('The Castro Theater',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('429 Castro St'),
+    leading: Icon(
+      Icons.theaters,
+      color: Colors.blue[500],
+    ),
+  ),
+  ListTile(
+    title: Text('Alamo Drafthouse Cinema',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('2550 Mission St'),
+    leading: Icon(
+      Icons.theaters,
+      color: Colors.blue[500],
+    ),
+  ),
+  ListTile(
+    title: Text('Roxie Theater',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('3117 16th St'),
+    leading: Icon(
+      Icons.theaters,
+      color: Colors.blue[500],
+    ),
+  ),
+  ListTile(
+    title: Text('United Artists Stonestown Twin',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('501 Buckingham Way'),
+    leading: Icon(
+      Icons.theaters,
+      color: Colors.blue[500],
+    ),
+  ),
+  ListTile(
+    title: Text('AMC Metreon 16',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('135 4th St #3000'),
+    leading: Icon(
+      Icons.theaters,
+      color: Colors.blue[500],
+    ),
+  ),
+  Divider(),
+  ListTile(
+    title: Text('K\'s Kitchen',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('757 Monterey Blvd'),
+    leading: Icon(
+      Icons.restaurant,
+      color: Colors.blue[500],
+    ),
+  ),
+  ListTile(
+    title: Text('Emmy\'s Restaurant',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('1923 Ocean Ave'),
+    leading: Icon(
+      Icons.restaurant,
+      color: Colors.blue[500],
+    ),
+  ),
+  ListTile(
+    title: Text('Chaiya Thai Restaurant',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('272 Claremont Blvd'),
+    leading: Icon(
+      Icons.restaurant,
+      color: Colors.blue[500],
+    ),
+  ),
+  ListTile(
+    title: Text('La Ciccia',
+        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
+    subtitle: Text('291 30th St'),
+    leading: Icon(
+      Icons.restaurant,
+      color: Colors.blue[500],
+    ),
+  ),
+];
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+        elevation: 5.0, // Removing the drop shadow cast by the app bar.
+      ),
+      body: Center(
+        child: ListView(
+          children: list,
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/listview/pubspec.yaml b/es_ES/_includes/code/layout/listview/pubspec.yaml
new file mode 100644
index 0000000000..964fb5ff1d
--- /dev/null
+++ b/es_ES/_includes/code/layout/listview/pubspec.yaml
@@ -0,0 +1,9 @@
+name: listview
+description: Demonstrates the ListView and ListTile widgets.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/layout/main.dart b/es_ES/_includes/code/layout/main.dart
new file mode 100644
index 0000000000..ff2ce532d5
--- /dev/null
+++ b/es_ES/_includes/code/layout/main.dart
@@ -0,0 +1,45 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: Text('Hello World'),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/packed/main.dart b/es_ES/_includes/code/layout/packed/main.dart
new file mode 100644
index 0000000000..85e8c96c96
--- /dev/null
+++ b/es_ES/_includes/code/layout/packed/main.dart
@@ -0,0 +1,59 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Comment out lines 7 and 10 to suppress the visual layout at runtime.
+import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    var packedRow = Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Icon(Icons.star, color: Colors.green[500]),
+        Icon(Icons.star, color: Colors.green[500]),
+        Icon(Icons.star, color: Colors.green[500]),
+        Icon(Icons.star, color: Colors.black),
+        Icon(Icons.star, color: Colors.black),
+      ],
+    );
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: packedRow,
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/packed/pubspec.yaml b/es_ES/_includes/code/layout/packed/pubspec.yaml
new file mode 100644
index 0000000000..722cdf2c2d
--- /dev/null
+++ b/es_ES/_includes/code/layout/packed/pubspec.yaml
@@ -0,0 +1,9 @@
+name: packed
+description: Demonstrates the mainAxisSize property in Container.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/layout/pavlova/.gitignore b/es_ES/_includes/code/layout/pavlova/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/pavlova/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/pavlova/images/pavlova.jpg b/es_ES/_includes/code/layout/pavlova/images/pavlova.jpg
new file mode 100644
index 0000000000..00723d4eb9
Binary files /dev/null and b/es_ES/_includes/code/layout/pavlova/images/pavlova.jpg differ
diff --git a/es_ES/_includes/code/layout/pavlova/main.dart b/es_ES/_includes/code/layout/pavlova/main.dart
new file mode 100644
index 0000000000..971b663439
--- /dev/null
+++ b/es_ES/_includes/code/layout/pavlova/main.dart
@@ -0,0 +1,178 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Use the iOS device iPad Pro in the Simulator and turn it horizontally.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 9 and 12 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.green,
+      ),
+      home: MyHomePage(title: 'Strawberry Pavlova Recipe'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    var titleText = Container(
+      padding: EdgeInsets.all(20.0),
+      child: Text(
+        'Strawberry Pavlova',
+        style: TextStyle(
+          fontWeight: FontWeight.w800,
+          letterSpacing: 0.5,
+          fontSize: 30.0,
+        ),
+      ),
+    );
+
+    var subTitle = Text(
+      '''
+Pavlova is a meringue-based dessert named after the Russian ballerina Anna Pavlova. Pavlova features a crisp crust and soft, light inside, topped with fruit and whipped cream.
+''',
+      textAlign: TextAlign.center,
+      style: TextStyle(
+        fontFamily: 'Georgia',
+        fontSize: 25.0,
+      ),
+    );
+
+    var ratings = Container(
+      padding: EdgeInsets.all(20.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(Icons.star, color: Colors.black),
+              Icon(Icons.star, color: Colors.black),
+              Icon(Icons.star, color: Colors.black),
+              Icon(Icons.star, color: Colors.black),
+              Icon(Icons.star, color: Colors.black),
+            ],
+          ),
+          Text(
+            '170 Reviews',
+            style: TextStyle(
+              color: Colors.black,
+              fontWeight: FontWeight.w800,
+              fontFamily: 'Roboto',
+              letterSpacing: 0.5,
+              fontSize: 20.0,
+            ),
+          ),
+        ],
+      ),
+    );
+
+    var descTextStyle = TextStyle(
+      color: Colors.black,
+      fontWeight: FontWeight.w800,
+      fontFamily: 'Roboto',
+      letterSpacing: 0.5,
+      fontSize: 18.0,
+      height: 2.0,
+    );
+
+    // DefaultTextStyle.merge allows you to create a default text
+    // style that is inherited by its child and all subsequent children.
+    var iconList = DefaultTextStyle.merge(
+      style: descTextStyle,
+      child: Container(
+        padding: EdgeInsets.all(20.0),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            Column(
+              children: [
+                Icon(Icons.kitchen, color: Colors.green[500]),
+                Text('PREP:'),
+                Text('25 min'),
+              ],
+            ),
+            Column(
+              children: [
+                Icon(Icons.timer, color: Colors.green[500]),
+                Text('COOK:'),
+                Text('1 hr'),
+              ],
+            ),
+            Column(
+              children: [
+                Icon(Icons.restaurant, color: Colors.green[500]),
+                Text('FEEDS:'),
+                Text('4-6'),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+
+    var leftColumn = Container(
+      padding: EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
+      child: Column(
+        children: [
+          titleText,
+          subTitle,
+          ratings,
+          iconList,
+        ],
+      ),
+    );
+
+    var mainImage = Image.asset(
+      'images/pavlova.jpg',
+      fit: BoxFit.cover,
+    );
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: Container(
+          margin: EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 30.0),
+          height: 600.0,
+          child: Card(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Container(
+                  width: 440.0,
+                  child: leftColumn,
+                ),
+                mainImage,
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/pavlova/pubspec.yaml b/es_ES/_includes/code/layout/pavlova/pubspec.yaml
new file mode 100644
index 0000000000..7c3d5212a6
--- /dev/null
+++ b/es_ES/_includes/code/layout/pavlova/pubspec.yaml
@@ -0,0 +1,11 @@
+name: pavlova
+description: Demonstrates building a layout for the Strawberry Pavlova app.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pavlova.jpg
diff --git a/es_ES/_includes/code/layout/row-expanded-2/.gitignore b/es_ES/_includes/code/layout/row-expanded-2/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/row-expanded-2/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/row-expanded-2/images/pic1.jpg b/es_ES/_includes/code/layout/row-expanded-2/images/pic1.jpg
new file mode 100755
index 0000000000..1dc9a30324
Binary files /dev/null and b/es_ES/_includes/code/layout/row-expanded-2/images/pic1.jpg differ
diff --git a/es_ES/_includes/code/layout/row-expanded-2/images/pic2.jpg b/es_ES/_includes/code/layout/row-expanded-2/images/pic2.jpg
new file mode 100755
index 0000000000..fbda283d0b
Binary files /dev/null and b/es_ES/_includes/code/layout/row-expanded-2/images/pic2.jpg differ
diff --git a/es_ES/_includes/code/layout/row-expanded-2/images/pic3.jpg b/es_ES/_includes/code/layout/row-expanded-2/images/pic3.jpg
new file mode 100755
index 0000000000..5c8b50bb51
Binary files /dev/null and b/es_ES/_includes/code/layout/row-expanded-2/images/pic3.jpg differ
diff --git a/es_ES/_includes/code/layout/row-expanded-2/main.dart b/es_ES/_includes/code/layout/row-expanded-2/main.dart
new file mode 100644
index 0000000000..d56afa1e5f
--- /dev/null
+++ b/es_ES/_includes/code/layout/row-expanded-2/main.dart
@@ -0,0 +1,61 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Comment out lines 7 and 10 to suppress the visual layout at runtime.
+import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Expanded(
+              child: Image.asset('images/pic1.jpg'),
+            ),
+            Expanded(
+              child: Image.asset('images/pic2.jpg'),
+            ),
+            Expanded(
+              child: Image.asset('images/pic3.jpg'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/row-expanded-2/pubspec.yaml b/es_ES/_includes/code/layout/row-expanded-2/pubspec.yaml
new file mode 100644
index 0000000000..50aebe24de
--- /dev/null
+++ b/es_ES/_includes/code/layout/row-expanded-2/pubspec.yaml
@@ -0,0 +1,13 @@
+name: row_expanded_2
+description: Demonstrates a Row widget containing an Expanded widget.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pic1.jpg
+    - images/pic2.jpg
+    - images/pic3.jpg
diff --git a/es_ES/_includes/code/layout/row-expanded/.gitignore b/es_ES/_includes/code/layout/row-expanded/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/row-expanded/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/row-expanded/images/pic1.jpg b/es_ES/_includes/code/layout/row-expanded/images/pic1.jpg
new file mode 100644
index 0000000000..d601334dce
Binary files /dev/null and b/es_ES/_includes/code/layout/row-expanded/images/pic1.jpg differ
diff --git a/es_ES/_includes/code/layout/row-expanded/images/pic2.jpg b/es_ES/_includes/code/layout/row-expanded/images/pic2.jpg
new file mode 100644
index 0000000000..fbda283d0b
Binary files /dev/null and b/es_ES/_includes/code/layout/row-expanded/images/pic2.jpg differ
diff --git a/es_ES/_includes/code/layout/row-expanded/images/pic3.jpg b/es_ES/_includes/code/layout/row-expanded/images/pic3.jpg
new file mode 100644
index 0000000000..ac1e2d6d79
Binary files /dev/null and b/es_ES/_includes/code/layout/row-expanded/images/pic3.jpg differ
diff --git a/es_ES/_includes/code/layout/row-expanded/main.dart b/es_ES/_includes/code/layout/row-expanded/main.dart
new file mode 100644
index 0000000000..0afc7cfe17
--- /dev/null
+++ b/es_ES/_includes/code/layout/row-expanded/main.dart
@@ -0,0 +1,62 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Comment out lines 7 and 10 to suppress the visual layout at runtime.
+import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Expanded(
+              child: Image.asset('images/pic1.jpg'),
+            ),
+            Expanded(
+              flex: 2,
+              child: Image.asset('images/pic2.jpg'),
+            ),
+            Expanded(
+              child: Image.asset('images/pic3.jpg'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/row-expanded/pubspec.yaml b/es_ES/_includes/code/layout/row-expanded/pubspec.yaml
new file mode 100644
index 0000000000..65a6c3c751
--- /dev/null
+++ b/es_ES/_includes/code/layout/row-expanded/pubspec.yaml
@@ -0,0 +1,13 @@
+name: row_expanded
+description: Demonstrates a Row widget containing an Expanded widget with a flex factor of 2.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pic1.jpg
+    - images/pic2.jpg
+    - images/pic3.jpg
diff --git a/es_ES/_includes/code/layout/row/.gitignore b/es_ES/_includes/code/layout/row/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/row/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/row/images/pic1.jpg b/es_ES/_includes/code/layout/row/images/pic1.jpg
new file mode 100755
index 0000000000..6b6acde185
Binary files /dev/null and b/es_ES/_includes/code/layout/row/images/pic1.jpg differ
diff --git a/es_ES/_includes/code/layout/row/images/pic2.jpg b/es_ES/_includes/code/layout/row/images/pic2.jpg
new file mode 100755
index 0000000000..6c0094e756
Binary files /dev/null and b/es_ES/_includes/code/layout/row/images/pic2.jpg differ
diff --git a/es_ES/_includes/code/layout/row/images/pic3.jpg b/es_ES/_includes/code/layout/row/images/pic3.jpg
new file mode 100755
index 0000000000..33bbf1d3cd
Binary files /dev/null and b/es_ES/_includes/code/layout/row/images/pic3.jpg differ
diff --git a/es_ES/_includes/code/layout/row/main.dart b/es_ES/_includes/code/layout/row/main.dart
new file mode 100644
index 0000000000..6048cf4fff
--- /dev/null
+++ b/es_ES/_includes/code/layout/row/main.dart
@@ -0,0 +1,55 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Comment out lines 7 and 10 to suppress the visual layout at runtime.
+import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            Image.asset('images/pic1.jpg'),
+            Image.asset('images/pic2.jpg'),
+            Image.asset('images/pic3.jpg'),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/row/pubspec.yaml b/es_ES/_includes/code/layout/row/pubspec.yaml
new file mode 100644
index 0000000000..892d6bb02c
--- /dev/null
+++ b/es_ES/_includes/code/layout/row/pubspec.yaml
@@ -0,0 +1,13 @@
+name: row
+description: Demonstrates the Row widget.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pic1.jpg
+    - images/pic2.jpg
+    - images/pic3.jpg
diff --git a/es_ES/_includes/code/layout/stack/.gitignore b/es_ES/_includes/code/layout/stack/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/stack/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/stack/images/pic.jpg b/es_ES/_includes/code/layout/stack/images/pic.jpg
new file mode 100644
index 0000000000..87f0cae26f
Binary files /dev/null and b/es_ES/_includes/code/layout/stack/images/pic.jpg differ
diff --git a/es_ES/_includes/code/layout/stack/main.dart b/es_ES/_includes/code/layout/stack/main.dart
new file mode 100644
index 0000000000..16f58ebb84
--- /dev/null
+++ b/es_ES/_includes/code/layout/stack/main.dart
@@ -0,0 +1,71 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 7 and 10 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+
+  final String title;
+
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  @override
+  Widget build(BuildContext context) {
+    var stack = Stack(
+      alignment: const Alignment(0.6, 0.6),
+      children: [
+        CircleAvatar(
+          backgroundImage: AssetImage('images/pic.jpg'),
+          radius: 100.0,
+        ),
+        Container(
+          decoration: BoxDecoration(
+            color: Colors.black45,
+          ),
+          child: Text(
+            'Mia B',
+            style: TextStyle(
+              fontSize: 20.0,
+              fontWeight: FontWeight.bold,
+              color: Colors.white,
+            ),
+          ),
+        ),
+      ],
+    );
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: stack,
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/stack/pubspec.yaml b/es_ES/_includes/code/layout/stack/pubspec.yaml
new file mode 100644
index 0000000000..b700439302
--- /dev/null
+++ b/es_ES/_includes/code/layout/stack/pubspec.yaml
@@ -0,0 +1,10 @@
+name: stack
+description: Demonstrates the Stack widget.
+
+dependencies:
+  flutter:
+    sdk: flutter
+flutter:
+  uses-material-design: true
+  assets:
+    - images/pic.jpg
diff --git a/es_ES/_includes/code/layout/tapbox-a/.gitignore b/es_ES/_includes/code/layout/tapbox-a/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-a/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/tapbox-a/main.dart b/es_ES/_includes/code/layout/tapbox-a/main.dart
new file mode 100644
index 0000000000..526dff971d
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-a/main.dart
@@ -0,0 +1,71 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+// Uncomment lines 7 and 10 to view the visual layout at runtime.
+//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
+
+void main() {
+  //debugPaintSizeEnabled = true;
+  runApp(MyApp());
+}
+
+// TapboxA manages its own state.
+
+//------------------------- TapboxA ----------------------------------
+
+class TapboxA extends StatefulWidget {
+  TapboxA({Key key}) : super(key: key);
+
+  @override
+  _TapboxAState createState() => _TapboxAState();
+}
+
+class _TapboxAState extends State<TapboxA> {
+  bool _active = false;
+
+  void _handleTap() {
+    setState(() {
+      _active = !_active;
+    });
+  }
+
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _handleTap,
+      child: Container(
+        child: Center(
+          child: Text(
+            _active ? 'Active' : 'Inactive',
+            style: TextStyle(fontSize: 32.0, color: Colors.white),
+          ),
+        ),
+        width: 200.0,
+        height: 200.0,
+        decoration: BoxDecoration(
+          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
+        ),
+      ),
+    );
+  }
+}
+
+//------------------------- MyApp ----------------------------------
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Flutter Demo'),
+        ),
+        body: Center(
+          child: TapboxA(),
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/tapbox-a/pubspec.yaml b/es_ES/_includes/code/layout/tapbox-a/pubspec.yaml
new file mode 100644
index 0000000000..055efa27f8
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-a/pubspec.yaml
@@ -0,0 +1,9 @@
+name: tapbox_a
+description: Demonstrates a stateful widget that manages its own state.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/layout/tapbox-b/.gitignore b/es_ES/_includes/code/layout/tapbox-b/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-b/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/tapbox-b/main.dart b/es_ES/_includes/code/layout/tapbox-b/main.dart
new file mode 100644
index 0000000000..8405271a63
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-b/main.dart
@@ -0,0 +1,91 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+// ParentWidget manages the state for TapboxB.
+
+//------------------------ ParentWidget --------------------------------
+
+class ParentWidget extends StatefulWidget {
+  @override
+  _ParentWidgetState createState() => _ParentWidgetState();
+}
+
+class _ParentWidgetState extends State<ParentWidget> {
+  bool _active = false;
+
+  void _handleTapboxChanged(bool newValue) {
+    setState(() {
+      _active = newValue;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: TapboxB(
+        active: _active,
+        onChanged: _handleTapboxChanged,
+      ),
+    );
+  }
+}
+
+//------------------------- TapboxB ----------------------------------
+
+class TapboxB extends StatelessWidget {
+  TapboxB({Key key, this.active: false, @required this.onChanged})
+      : super(key: key);
+
+  final bool active;
+  final ValueChanged<bool> onChanged;
+
+  void _handleTap() {
+    onChanged(!active);
+  }
+
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _handleTap,
+      child: Container(
+        child: Center(
+          child: Text(
+            active ? 'Active' : 'Inactive',
+            style: TextStyle(fontSize: 32.0, color: Colors.white),
+          ),
+        ),
+        width: 200.0,
+        height: 200.0,
+        decoration: BoxDecoration(
+          color: active ? Colors.lightGreen[700] : Colors.grey[600],
+        ),
+      ),
+    );
+  }
+}
+
+//------------------------- MyApp --------------------------------------
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Flutter Demo'),
+        ),
+        body: Center(
+          child: ParentWidget(),
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/tapbox-b/pubspec.yaml b/es_ES/_includes/code/layout/tapbox-b/pubspec.yaml
new file mode 100644
index 0000000000..f166e4691f
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-b/pubspec.yaml
@@ -0,0 +1,9 @@
+name: tapbox_b
+description: Demonstrates a stateful widget whose parent manages its state.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/layout/tapbox-c/.gitignore b/es_ES/_includes/code/layout/tapbox-c/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-c/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/tapbox-c/main.dart b/es_ES/_includes/code/layout/tapbox-c/main.dart
new file mode 100644
index 0000000000..fb48086833
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-c/main.dart
@@ -0,0 +1,125 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+//---------------------------- ParentWidget ----------------------------
+
+class ParentWidget extends StatefulWidget {
+  @override
+  _ParentWidgetState createState() => _ParentWidgetState();
+}
+
+class _ParentWidgetState extends State<ParentWidget> {
+  bool _active = false;
+
+  void _handleTapboxChanged(bool newValue) {
+    setState(() {
+      _active = newValue;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: TapboxC(
+        active: _active,
+        onChanged: _handleTapboxChanged,
+      ),
+    );
+  }
+}
+
+//----------------------------- TapboxC ------------------------------
+
+class TapboxC extends StatefulWidget {
+  TapboxC({Key key, this.active: false, @required this.onChanged})
+      : super(key: key);
+
+  final bool active;
+  final ValueChanged<bool> onChanged;
+
+  _TapboxCState createState() => _TapboxCState();
+}
+
+class _TapboxCState extends State<TapboxC> {
+  bool _highlight = false;
+
+  void _handleTapDown(TapDownDetails details) {
+    setState(() {
+      _highlight = true;
+    });
+  }
+
+  void _handleTapUp(TapUpDetails details) {
+    setState(() {
+      _highlight = false;
+    });
+  }
+
+  void _handleTapCancel() {
+    setState(() {
+      _highlight = false;
+    });
+  }
+
+  void _handleTap() {
+    widget.onChanged(!widget.active);
+  }
+
+  Widget build(BuildContext context) {
+    // This example adds a green border on tap down.
+    // On tap up, the square changes to the opposite state.
+    return GestureDetector(
+      onTapDown: _handleTapDown, // Handle the tap events in the order that
+      onTapUp: _handleTapUp,     // they occur: down, up, tap, cancel
+      onTap: _handleTap,
+      onTapCancel: _handleTapCancel,
+      child: Container(
+        child: Center(
+          child: Text(
+            widget.active ? 'Active' : 'Inactive',
+            style: TextStyle(fontSize: 32.0, color: Colors.white),
+          ),
+        ),
+        width: 200.0,
+        height: 200.0,
+        decoration: BoxDecoration(
+          color:
+              widget.active ? Colors.lightGreen[700] : Colors.grey[600],
+          border: _highlight
+              ? Border.all(
+                  color: Colors.teal[700],
+                  width: 10.0,
+                )
+              : null,
+        ),
+      ),
+    );
+  }
+}
+
+//------------------------------- MyApp --------------------------------
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Flutter Demo'),
+        ),
+        body: Center(
+          child: ParentWidget(),
+        ),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/tapbox-c/pubspec.yaml b/es_ES/_includes/code/layout/tapbox-c/pubspec.yaml
new file mode 100644
index 0000000000..eff42c4f64
--- /dev/null
+++ b/es_ES/_includes/code/layout/tapbox-c/pubspec.yaml
@@ -0,0 +1,9 @@
+name: tapbox_c
+description: Demonstrates some state handled by the parent and some state handled by the stateful widget.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/code/layout/widgets-only/.gitignore b/es_ES/_includes/code/layout/widgets-only/.gitignore
new file mode 100644
index 0000000000..14c7d4c3f7
--- /dev/null
+++ b/es_ES/_includes/code/layout/widgets-only/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.atom/
+.idea
+.packages
+.pub/
+build/
+ios/.generated/
+packages
+pubspec.lock
diff --git a/es_ES/_includes/code/layout/widgets-only/main.dart b/es_ES/_includes/code/layout/widgets-only/main.dart
new file mode 100644
index 0000000000..b67ee7b3ae
--- /dev/null
+++ b/es_ES/_includes/code/layout/widgets-only/main.dart
@@ -0,0 +1,27 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This app doesn't use any material widgets, such as Scaffold.
+// Normally, an app that doesn't use Scaffold has a black background
+// and the default text color is black. This app changes its background
+// to white and its text color to dark grey to mimic a material app.
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(color: Colors.white),
+      child: Center(
+        child: Text('Hello World',
+            textDirection: TextDirection.ltr,
+            style: TextStyle(fontSize: 40.0, color: Colors.black87)),
+      ),
+    );
+  }
+}
diff --git a/es_ES/_includes/code/layout/widgets-only/pubspec.yaml b/es_ES/_includes/code/layout/widgets-only/pubspec.yaml
new file mode 100644
index 0000000000..4621147ee0
--- /dev/null
+++ b/es_ES/_includes/code/layout/widgets-only/pubspec.yaml
@@ -0,0 +1,9 @@
+name: widgets_only
+description: Demonstrates a "Hello World" example that uses no material widgets.
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
diff --git a/es_ES/_includes/footer.html b/es_ES/_includes/footer.html
new file mode 100644
index 0000000000..2570123a17
--- /dev/null
+++ b/es_ES/_includes/footer.html
@@ -0,0 +1,27 @@
+<footer class="site-footer">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-sm-12">
+        <div class="logo">
+          <img src="/images/flutter-mono-81x100.png" alt="Flutter Logo" width="81" height="100">
+        </div>
+          <p class="site-footer__link-list">
+            <a href="https://groups.google.com/forum/#!forum/flutter-dev">{{ site.email_name }}</a> &bull;
+            <a href="https://twitter.com/flutterio">twitter</a> &bull;
+            <a href="https://github.com/flutter/">github</a> &bull;
+            <a href="/tos">terms</a> &bull;
+            <a href="https://www.google.com/intl/en/policies/privacy/">Privacidad</a> &bull;
+            <a href="https://flutter-io.cn">社区中文资源</a>
+          </p>
+
+          <p class="licenses">
+            Salvo que se indique lo contrario,
+            este trabajo se encuentra bajo licencia de
+            <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative
+            Commons Attribution 4.0 International License</a>,
+            y los códigos de muestra tiene licencia bajo BSD License.
+          </p>
+      </div>
+    </div>
+  </div>
+</footer>
diff --git a/es_ES/_includes/head.html b/es_ES/_includes/head.html
new file mode 100644
index 0000000000..cc4be78ab0
--- /dev/null
+++ b/es_ES/_includes/head.html
@@ -0,0 +1,46 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{page.title}} {% if page.homepage != true %} - {{ site.title }} {% endif %}</title>
+  <link rel="shortcut icon" href="{{ "/images/favicon.png" | prepend: site.baseurl  }}">
+  
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-K5CZXWP');
+  </script>
+  <!-- End Google Tag Manager -->
+
+  {% assign desc = page.description | default: page.content | strip_html | replace:'"','' | strip_newlines | truncatewords: 50 | split: '{%' | first %}
+  <meta name="description" content="{{desc}}">
+  <meta name="keywords" content="{{page.tags}}{% if page.tags %}, {% endif %} {{page.keywords}}">
+
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:site" content="@EsFlutter">
+
+  <meta property="og:title" content="{{ page.title }}">
+  <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <meta property="og:description" content="{{desc}}">
+  {% assign og_image_path = page.image | default: layout.image | default: '/images/flutter-logo-sharing.png' %}
+  <meta property="og:image" content="{{og_image_path | absolute_url}}">
+
+  <link rel="stylesheet" href="{{ "/css/lavish-bootstrap.css" | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro%7CRoboto:500,400italic,300,400" rel="stylesheet">
+  {% for css_name in page.extra_css %}
+      <link rel="stylesheet" href="{{ css_name }}">
+  {% endfor %}
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123350679-1"></script> 
+  <script> 
+    window.dataLayer = window.dataLayer || []; 
+    function gtag(){
+      dataLayer.push(arguments);
+    } 
+    gtag('js', new Date()); 
+    gtag('config', 'UA-123350679-1'); 
+  </script>
+
+  <!-- <meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4" /> -->
+</head>
diff --git a/es_ES/_includes/header.html b/es_ES/_includes/header.html
new file mode 100644
index 0000000000..68fb4067b6
--- /dev/null
+++ b/es_ES/_includes/header.html
@@ -0,0 +1,31 @@
+<header class="site-header">
+  <div class="container-fluid header-contents">
+    <div class="row">
+      <div class="col-md-12">
+        <i class="fa fa-bars" id="sidebar-toggle-button" aria-hidden="true" style="display:none"></i>
+        <img src="/images/flutter-mark-square-100.png" alt="Flutter Logo" width="40" height="40" style="vertical-align:middle">
+
+        <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
+
+        <nav class="site-nav">
+          <a href="#" class="menu-icon">
+            <i class="material-icons-extended">more_vert</i>
+          </a>
+          <div class="trigger">
+            <a class="page-link" href="/docs/">Documentos</a>
+            <a class="page-link" href="/showcase/">Portafolio</a>
+            <a class="page-link" href="https://github.com/flutter/flutter">GitHub</a>
+            <a class="page-link" href="https://pub.dartlang.org/flutter">Paquetes</a>
+            <a class="page-link" href="/support/">Soporte</a>
+            <form action="/search/" class="nav-searchbox" id="cse-search-box" style="display: inline">
+              <input type="hidden" name="cx" value="007067728241810524621:gm6vraqlc8c">
+              <input type="hidden" name="ie" value="UTF-8">
+              <input type="hidden" name="hl" value="en">
+              <input type="search" name="q" id="q" autocomplete="off" placeholder="Buscar">
+            </form>
+          </div>
+        </nav>
+      </div>
+    </div> <!-- /.row -->
+  </div> <!-- /.container -->
+</header>
diff --git a/es_ES/_includes/important.html b/es_ES/_includes/important.html
new file mode 100644
index 0000000000..0cc7bb2892
--- /dev/null
+++ b/es_ES/_includes/important.html
@@ -0,0 +1 @@
+<div markdown="span" class="alert alert-warning" role="alert"><i class="fa fa-warning"></i> <b>Importante:</b> {{include.content}}</div>
\ No newline at end of file
diff --git a/es_ES/_includes/includelines b/es_ES/_includes/includelines
new file mode 100644
index 0000000000..e5ffb66198
--- /dev/null
+++ b/es_ES/_includes/includelines
@@ -0,0 +1,27 @@
+{% comment %}{% raw %}<!--
+Includes the specified lines from an include file.
+
+Usage:
+  {% include includelines filename=PATH start=INT count=INT %}
+
+  filename: path to file under _includes
+  start: first line to include, starting at 1
+  count: number of lines to include
+
+Example:
+
+  {% include includelines filename='src/HelloWorld.java' start=10 count=5 %}
+  
+-->{% endraw %}{% endcomment %}
+
+{% capture filecontent %}
+    {% include {{include.filename}} %}
+{% endcapture %}
+
+{% assign lines = filecontent | newline_to_br | split: '<br />' %}
+
+{% prettify dart %}
+
+{% for line in lines offset:{{include.start}} limit:{{include.count}} %}{{ line }}{% endfor %}
+
+{% endprettify %}
\ No newline at end of file
diff --git a/es_ES/_includes/note.html b/es_ES/_includes/note.html
new file mode 100644
index 0000000000..06bce9bd66
--- /dev/null
+++ b/es_ES/_includes/note.html
@@ -0,0 +1 @@
+<div markdown="span" class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Nota:</b> {{include.content}}</div>
diff --git a/es_ES/_includes/sdk-archive-master.md b/es_ES/_includes/sdk-archive-master.md
new file mode 100644
index 0000000000..4d9b3c1dd7
--- /dev/null
+++ b/es_ES/_includes/sdk-archive-master.md
@@ -0,0 +1,13 @@
+## Master channel
+
+Installation bundles are not available for master. However, you can get the SDK
+directly from our GitHub repo by 'git cloning' the master channel (as
+specified by -b master), and then trigger a download of the SDK dependencies:
+
+```terminal
+git clone -b master https://github.com/flutter/flutter.git
+./flutter/bin/flutter --version
+```
+
+For additional details on how our installation bundles are structured, see
+[Installation bundles](https://github.com/flutter/flutter/wiki/Flutter-Installation-Bundles).
diff --git a/es_ES/_includes/setup/android-setup.md b/es_ES/_includes/setup/android-setup.md
new file mode 100644
index 0000000000..a4b9daa030
--- /dev/null
+++ b/es_ES/_includes/setup/android-setup.md
@@ -0,0 +1,52 @@
+## Configuración de Android 
+
+<aside class="alert alert-success" markdown="1">
+<i class="fa fa-lightbulb-o"> </i> **Nota:**
+Flutter requiere de una completa instalación de Android Studio para proveer
+las dependencias de la plataforma de Android. De cualquier manera, puede desarrollar sus
+apps de Flutter en diferentes editores; hablaremos de ello en un paso siguiente.
+</aside>
+
+
+### Instalar Android Studio
+
+1. Descarga e instala [Android Studio](https://developer.android.com/studio/index.html).
+
+1. Inicia Android Studio, y sigue todo el 'Android Studio Setup Wizard'. Este
+Instalará la versión más reciente de Android SDK, Android SDK Platform-Tools y 
+Android SDK Build-Tools, Las cuales son requeridas por Flutter cuando se desarrolla para Android.
+
+### Configurar tu dispositivo Android
+
+Prepare la ejecución y pruebas de app de Flutter en un dispositivo de Android, necesitará
+un dispositivo Android ejecutando Android 4.1 (API nivel 16) o superior.
+
+1. Habilita **Opciones de desarrollador** y **Depurador por USB** en tu dispositivo. Instrucciones detalladas
+ están disponibles en la [Documentación de Android](https://developer.android.com/studio/debug/dev-options.html).
+1. Solo en Windows: Instala [Google USB Driver](https://developer.android.com/studio/run/win-usb)
+1. Utilizando el cable USB, conecta tu móvil de la computadora, de requerirse en tu dispositivo, autoriza el acceso de la computadora a tu dispositivo.
+1. En terminal, ejecuta el comando `flutter devices`  para verificar que Flutter ha reconocido 
+tu dispositivo Android conectado.
+
+Por defecto, Flutter utiliza la versión SDK de Android donde se encuentren las herramientas `adb`. Si
+quieres que Flutter utilice alguna instalación diferente de el SDK de Android, deberás configurar
+la variable de entorno `ANDROID_HOME` en el directorio de instalación.
+
+### Configurar el emulador de Android
+
+Prepare la ejecución y pruebas de app de Flutter en el emulador de Android, siguiendo estos pasos:
+
+1. Habilite [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html) en su equipo.
+1. Abra **Android Studio>Tools>Android>AVD Manager** y seleccione
+**Create Virtual Device**. (El submenú **Android** está presente solo
+cuando se encuentra dentro de un proyecto de Android.)
+1. Elija un dispositivo y seleccione **Next**.
+1. Seleccione una o mas imágenes del sistema que quiera emular,
+   y seleccione **Next**. Una imagen _x86_ o _x86\_64_ es recomendada.
+1. Dentro de Emulated Performance, seleccione **Hardware - GLES 2.0** para habilitarlo
+[aceleración de hardware](https://developer.android.com/studio/run/emulator-acceleration.html).
+1. Verifique que la configuración de AVD es correcta, y seleccione **Finish**.
+
+   Para mayor detalle de los pasos de arriba, vea [Administrando AVDs](https://developer.android.com/studio/run/managing-avds.html).
+1. En el Administrador de Dispositivos Virtuales de Android (AVD) , de clic en la barra de herramienta **Run**.
+   El emulador iniciara el arranque y mostrara el lienzo (canvas) por defecto para la versión del SO y dispositivo seleccionado.
diff --git a/es_ES/_includes/setup/get-sdk-win.md b/es_ES/_includes/setup/get-sdk-win.md
new file mode 100644
index 0000000000..cf1c68a68c
--- /dev/null
+++ b/es_ES/_includes/setup/get-sdk-win.md
@@ -0,0 +1,66 @@
+## Obtener el SDK de Flutter
+
+1. Descarga el siguiente paquete de instalación para obtener la versión beta mas reciente de 
+Flutter SDK (para otros lanzamientos, y paquetes viejos, véase la pagina [archivo 
+SDK](/sdk-archive/)):
+    * [(cargando...)](#){:.download-latest-link-windows}
+1. Extraiga el archivo zip y coloque el contenido de `flutter` en la locación
+   deseada de instalación para el Flutter SDK (ej. `C:\src\flutter`; no instale
+   flutter en un directorio como `C:\Program Files\` que requiere permisos de administrador).
+1. Localice el archivo `flutter_console.bat` dentro del directorio de `flutter`. Inicíelo con doble clic.
+
+Ahora está todo listo para ejecutar los comando de Flutter en la consola de Flutter!
+
+Para actualizar una versión existente de Flutter, vea [Actualizando Flutter](/upgrading/).
+
+### Actualizando tu "path"
+
+Si desea ejecutar los comandos de Flutter en un ventana de comandos regular de Windows, siga
+estos pasos y agregue Flutter a las variables de ambiente en el PATH:
+
+* Entra a "Panel de Control > Cuentas de usuario > Cuentas de usuario > Cambiar mis variables de entorno"
+* Debajo de "Variables de usuario" verifica si existe una entrada llamada "Path":
+    * Si el directorio de Flutter no existe, agrega el directorio completo `flutter\bin` usando `;`
+      como separador de los valores existentes.
+    * Si la entrada `Path` no existe, crea una nueva variable llamada `Path` con el 
+      directorio completo a `flutter\bin` como su valor.
+
+Reinicia Windows para aplicar los cambios completamente.
+
+### Ejecutar Flutter doctor
+
+En la consola de Flutter, ejecuta el siguiente comando para
+ver si existe alguna dependencia que necesite instalar para completar la configuración:
+
+{% commandline %}
+flutter doctor
+{% endcommandline %}
+
+Este comando verifica tu entorno y muestra un reporte en la terminal de windows.
+El SDK de Dart esta empaquetado con Flutter, no es necesario instalar Dart por separado.
+Verifica la salida con cuidado para otros programas que pudieras necesitar o para 
+desempeñar otras tareas mas adelante (mostradas en texto en **negrita**).
+
+Por Ejemplo:
+<pre>
+[-] Android toolchain - develop for Android devices
+    • Android SDK at D:\Android\sdk
+    <strong>✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ</strong>
+    • Try re-installing or updating your Android SDK,
+      visit https://flutter.io/setup/#android-setup for detailed instructions.
+</pre>
+
+La siguiente sección describe como desempeñar estas tareas y finalizar el proceso de configuración.
+
+Una vez que tenga instalado cualquiera de las dependencias faltantes, ejecute el comando `flutter doctor`
+de nuevo para verificar que todo se ha configurado correctamente.
+
+Las herramientas de Flutter usan Google Analytics para, anónimamente, reportar estadística de 
+características de uso y reportes básicos de fallas. Estos datos son utilizados para ayudar 
+a mejorar las herramientas de flutter con el tiempo.
+Analytics no enviá cada ejecución o cualquier ejecución dentro del `flutter config`,
+por lo que puede optar por no participar en los análisis antes de enviar los datos. 
+Para deshabilitar los reportes, teclee `flutter config --no-analytics` y para desplegar la
+configuración actual, teclee `flutter config`. 
+Vea la política de privacidad de Google: [www.google.com/intl/en/policies/privacy](https://www.google.com/intl/en/policies/privacy/).
+{: .alert-warning}
diff --git a/es_ES/_includes/setup/get-sdk.md b/es_ES/_includes/setup/get-sdk.md
new file mode 100644
index 0000000000..d0aaf136d5
--- /dev/null
+++ b/es_ES/_includes/setup/get-sdk.md
@@ -0,0 +1,69 @@
+## Obtener el SDK de Flutter {#get-sdk}
+
+1. Descarga el siguiente paquete de instalación para obtener la versión beta más reciente de 
+Flutter SDK (para otros lanzamientos, y paquetes viejos, véase la pagina [archivo 
+SDK](/sdk-archive/) page.):
+{% if page.url contains "linux" %}
+    * [(cargando...)](#){:.download-latest-link-linux}
+{% else %}
+    * [(cargando...)](#){:.download-latest-link-macos}
+{% endif %}<br><br>
+1. Extraer el archivo en la locación deseada, ej.:
+    {% commandline %}
+    cd ~/development
+{% if page.url contains "linux" %}
+    tar xf ~/Downloads/<span class="download-latest-link-filename-linux">flutter_linux_xxx.tar.xz</span>
+{% else %}
+    unzip ~/Downloads/<span class="download-latest-link-filename-macos">flutter_macos_xxx.zip</span>
+{% endif %}
+    {% endcommandline %}
+
+1. Agrega la herramienta `flutter` a tu "path":
+    {% commandline %}
+    export PATH=`pwd`/flutter/bin:$PATH
+    {% endcommandline %}
+
+El comando de arriba configurara el PATH en la variable temporal, para la ventana actual de terminal. para
+agregar de manera permanente Flutter a tu "path", vea [Actualiza el path](#update-your-path).
+
+Ahora esta todo listo para ejecutar los comando de Flutter en la consola de Flutter!
+
+Para actualizar una versión existente de Flutter, vea [Actualizando Flutter](/upgrading/).
+
+### Ejecutar Flutter doctor
+
+Ejecuta el siguiente comando para verificar si existe alguna dependencia que se necesite para
+completar la configuración:
+
+{% commandline %}
+flutter doctor
+{% endcommandline %}
+
+Este comando verifica tu ambiente y muestra un reporte en la terminal de windows.
+El SDK de Dart esta empaquetado con Flutter, no es necesario instalar Dart por separado.
+Verifica la salida con cuidad para otros programas que pudieras necesitar o para 
+desempeñar otras tareas mas adelante (mostradas en texto en **negrita**).
+
+Por ejemplo:
+<pre>
+[-] Android toolchain - develop for Android devices
+    • Android SDK at /Users/obiwan/Library/Android/sdk
+    <strong>✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ</strong>
+    • Try re-installing or updating your Android SDK,
+      visit https://flutter.io/setup/#android-setup for detailed instructions.
+</pre>
+
+La siguiente sección describe cómo desempeñar estas tareas y finalizar el proceso de configuración.
+
+Una vez que tenga instalado cualquiera de las dependencias faltantes, ejecute el comando `flutter doctor`
+de nuevo para verificar que todo se ha configurado correctamente.
+
+Las herramientas de Flutter usan Google Analytics para anónimamente reportar estadística de 
+características de uso y reportes básicos de fallas. Estos datos son utilizados para ayudar 
+a mejorar las herramientas de flutter con el tiempo.
+Analytics no envía cada ejecución o cualquier ejecución dentro del `flutter config`,
+por lo que puede optar por no participar en los análisis antes de enviar los datos. 
+Para deshabilitar los reportes, teclee `flutter config --no-analytics` y para desplegar la
+configuración actual, teclee `flutter config`. 
+Vea la política de privacidad de Google: [www.google.com/intl/en/policies/privacy](https://www.google.com/intl/en/policies/privacy/).
+{: .alert-warning}
diff --git a/es_ES/_includes/setup/ios-setup.md b/es_ES/_includes/setup/ios-setup.md
new file mode 100644
index 0000000000..1b6f5a9042
--- /dev/null
+++ b/es_ES/_includes/setup/ios-setup.md
@@ -0,0 +1,66 @@
+## Configuración de iOS 
+
+### Instalar Xcode
+
+Para desarrollar apps con Flutter en iOS, necesitaras una Mac con Xcode 9.0 o más reciente:
+
+1. Instalar Xcode 9.0 o más reciente (vía [descarga web](https://developer.apple.com/xcode/) o
+[Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835)).
+1. Configurar la línea de comandos de Xcode para usar el recién versión recién instalada de Xcode 
+ejecutando `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer` desde 
+la linea de comandos.
+
+   Esta es el directorio correcto la mayoría de casos, cuando quiera hacer uso de la versión más reciente de Xcode.
+   Si necesita usar una versión diferente, especifique esa dirección en su lugar.
+
+1. Asegúrese de firmar el acuerdo de licencia de Xcode abriendo por primera vez y confirmando o
+ejecutando `sudo xcodebuild -license` desde la linea de comando.
+
+Con Xcode, serás capaz de ejecutar apps de Flutter en un dispositivo o un simulador.
+
+### Configurar el simulador iOS
+
+Para preparar la ejecución y probar tu app de Flutter en el simulador de iOS, siga estos pasos:
+
+1. En su Mac, encuentre el simulador via Spotlight o utilizando el siguiente comando:
+
+{% commandline %}
+open -a Simulator
+{% endcommandline %}
+
+2. Asegura que el simulador utilizado este utilizando un dispositivo de 64 bits (iPhone 5s o superior)  verificando la configuración en el menú del simulador **Hardware > Device**.
+3. Dependiendo de el tamaño de la pantalla de la máquina de desarrollo, se simulará la calidad en la pantalla de tu dispositivo iOS el cual podría desbordar la pantalla, configura la escala del dispositivo en el menú **Window > Scale** en el simulador.
+4. Inicia tu app ejecutando `flutter run`.
+
+
+### Desplegar en dispositivos iOS
+
+Para desplegar tu app de Flutter en un dispositivo físico de iOS, necesitarás algunas herramientas extras y una cuenta de Apple. También necesitarás configurar el dispositivo físico para despegarlo en Xcode.
+
+
+1. Instalar [homebrew](http://brew.sh/).
+1. Abrir la terminar y ejecutar estos comandos para instalar las herramientas para desplegar las apps de Flutter en dispositivos iOS
+
+{% commandline %}
+brew update
+brew install --HEAD libimobiledevice
+brew install ideviceinstaller ios-deploy cocoapods
+pod setup
+{% endcommandline %}
+
+   Si cualquiera de estos comandos falla con error, ejecuta `brew doctor` y sigue las instrucciones
+   para resolver el problema.
+
+1. Continua con el flujo de registro en Xcode para provisionar tu proyecto:
+    1. Abre el espacio de trabajo por defecto en tu proyecto ejecutando `open ios/Runner.xcworkspace`  en una ventana de terminal del directorio donde está el proyecto de Flutter.
+    1. En Xcode, selecciona el proyecto `Runner` en  el panel de navegación del lado izquierdo.
+    1. En la página de configuración de `Runner`, asegurate que tu equipo de desarrollo esta seleccionado debajo de **General > Signing > Team**. Cuando seleccionas un equipo, Xcode crea y descarga un Certificado de Desarrollo, registra tu dispositivo a tu cuenta, y crea y descarga un perfil provisional (de necesitarse).
+        * Para empezar tu primer proyecto de desarrollo en iOS, necesitarás registrarte en Xcode con tu ID de Apple.<br>
+        ![Agregar cuenta en Xcode](/images/setup/xcode-account.png)<br>
+        Hay soporte en desarrollo y pruebas para cualquier ID de apple. Enrolarte en el programa de desarrolladores de Apple es necesario para distribuir tu app en el App Store. Ver la [diferencias entre los tipos de membresías de Apple](https://developer.apple.com/support/compare-memberships).
+        * La primera ocasiones que utilices un dispositivo físico para desarrollo iOS, necesitarás autorizar ambas tu Mac y tu certificado de desarrollo en el dispositivo. Selecciona `Trust` en la ventana que te muestra la primera vez que es conectado tu dispositivo iOs a tu Mac.<br>
+        ![Autorizar Mac](/images/setup/trust-computer.png)<br>
+        Ahora, ve a la configuración de la app en el dispositivo iOS, selecciona **General > Device Management**  y autoriza el Certificado.
+        * Si tu registro automático falla en Xcode, verifica que el valor del proyecto sea único **General > Identity > Bundle Identifier**.<br>
+        ![Compruebe el ID del paquete de la app](/images/setup/xcode-unique-bundle-id.png)
+1. Inicia tu app ejecutando el comando `flutter run`.
diff --git a/es_ES/_includes/setup/path-mac-linux.md b/es_ES/_includes/setup/path-mac-linux.md
new file mode 100644
index 0000000000..628d251ac5
--- /dev/null
+++ b/es_ES/_includes/setup/path-mac-linux.md
@@ -0,0 +1,31 @@
+### Actualiza tu path
+
+Se puede actualizar la variable de PATH para la sesión actual solo para la linea de comandos, 
+como se muestra en [Obtener Flutter SDK](./#get-sdk). Probablemente necesitarás 
+actualizar esta variable permanentemente, de esta manera poder ejecutar el comando `flutter`
+en cualquier sesión de terminal.
+
+Los pasos para modificar esta variables permanentemente para todas las sesiones de terminal para el equipo.
+Típicamente se agrega una linea al archivo que se ejecuta cada que abres
+una nueva ventana, por ejemplo:
+
+1. Determine el directorio donde se encuentra el SDK de Flutter. Necesitaras esto
+   en el paso 3.
+2. Abre (o crea) `$HOME/.bash_profile`. la dirección del archivo puede estar
+   en un lugar diferente en tu equipo.
+3. Agrega la siguiente linea y cambia `[PATH_TO_FLUTTER_GIT_DIRECTORY]` para ser
+   el directorio donde esta clonado el repositorio de Flutter:
+
+{% commandline %}
+export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH
+{% endcommandline %}
+
+4. Ejecuta `source $HOME/.bash_profile` para refrescar la ventana actual. 
+
+5. Verifica que el directorio de `flutter/bin` esta en tu PATH ejecutando el siguiente comando:
+
+{% commandline %}
+echo $PATH
+{% endcommandline %}
+
+Para mas detalles, ver [Estas preguntas en StackExchange](https://unix.stackexchange.com/questions/26047/how-to-correctly-add-a-path-to-path).
diff --git a/es_ES/_includes/setup/system-linux.md b/es_ES/_includes/setup/system-linux.md
new file mode 100644
index 0000000000..78bf54f766
--- /dev/null
+++ b/es_ES/_includes/setup/system-linux.md
@@ -0,0 +1,10 @@
+## Requerimiento del Sistema
+
+Para instalar y ejecutar Flutter, el ambiente de trabajo debe de cumplir al menos con los siguientes requerimientos:
+
+* **Sistema Operativo**: Linux (64-bit)
+* **Espacio en Disco**: 600 MB (no incluye espacio en disco para IDE/herramientas).
+* **Herramientas**: Flutter  depende de que estas herramientas estén disponibles en tu ambiente.
+  * `bash`, `mkdir`, `rm`, `git`, `curl`, `unzip`, `which`
+* **Librerías Compartidas**: El comando `test` en Flutter  depende de que estas librerías estén disponibles en tu ambiente.
+  * `libGLU.so.1` -  proveída por "mesa packages" ej. `libglu1-mesa` en Ubuntu/Debian
diff --git a/es_ES/_includes/setup/system-mac.md b/es_ES/_includes/setup/system-mac.md
new file mode 100644
index 0000000000..6f18a5b5b1
--- /dev/null
+++ b/es_ES/_includes/setup/system-mac.md
@@ -0,0 +1,8 @@
+## Requerimiento del sistema
+
+Para instalar y ejecutar Flutter, el ambiente de trabajo debe de cumplir al menos con los siguientes requerimientos:
+
+* **Sistema Operativo**: macOS (64-bit)
+* **Espacio en disco**: 700 MB (Esto no incluye el espacio en disco para IDE/tools).
+* **Herramientas**: Flutter necesita de estas herramientas de linea de comando estén disponibles en tu ambiente de trabajo.
+  * `bash`, `mkdir`, `rm`, `git`, `curl`, `unzip`, `which`
diff --git a/es_ES/_includes/setup/system-win.md b/es_ES/_includes/setup/system-win.md
new file mode 100644
index 0000000000..6bfdd5b564
--- /dev/null
+++ b/es_ES/_includes/setup/system-win.md
@@ -0,0 +1,12 @@
+## Requerimientos del Sistema
+
+Para instalar y ejecutar Flutter, el ambiente de trabajo debe de cumplir al menos con los siguientes requerimientos:
+
+* **Sistema Operativo**: Windows 7 SP1 o superior (64-bit)
+* **Espacio en Disco**: 400 MB (no incluye espacio en disco para IDE/herramientas).
+* **Herramientas**: Flutter  depende de que estas herramientas estén disponibles en tu ambiente.
+  * [PowerShell 5.0](https://docs.microsoft.com/en-us/powershell/scripting/setup/installing-windows-powershell#upgrading-existing-windows-powershell) o nueva.
+  * [Git para Windows](https://git-scm.com/download/win) (con la opción de "Usar Git para Windows Command Prompt")
+
+     Si Git para Windows esta ya instalado, asegurate de poder correr comandos con `git` desde el 
+     Command Prompt o PowerShell.
diff --git a/es_ES/_includes/sidebar.html b/es_ES/_includes/sidebar.html
new file mode 100644
index 0000000000..e44e0286c6
--- /dev/null
+++ b/es_ES/_includes/sidebar.html
@@ -0,0 +1,77 @@
+<ul id="mysidebar" class="nav">
+
+  <li class="sidebar-title">Empezar</li>
+
+    <ul class="sidebar-items">
+      <li><a href="/get-started/install/">1: Instalación</a></li>
+      <li><a href="/get-started/editor/">2: Configuración de editor</a></li>
+      <li><a href="/get-started/test-drive/">3: Prueba inicial</a></li>
+      <li><a href="/get-started/codelab/">4: Escribe tu primera app</a></li>
+      <li><a href="/get-started/learn-more/">5: Aprender mas</a></li>
+    </ul>
+
+  <li class="sidebar-title">Construye UIs</li>
+
+    <ul class="sidebar-items">
+      <li><a href="/widgets-intro/">Paseo por el framework</a></li>
+      <li><a href="/widgets/">Catalogo de Widgets</a></li>
+      <li><a href="/cookbook/">Recetas</a></li>
+      <li><a href="/catalog/samples/">Catalogo de Muestra</a></li>
+      <li><a href="/codelabs">Laboratorio</a></li>
+      <li><a href="/tutorials/layout/">Construyendo diseños - Tutorial</a></li>
+      <li><a href="/tutorials/interactive/">Agregando interactividad - Tutorial</a></li>
+      <li><a href="/web-analogs/">Flutter para Web Devs</a></li>
+      <li><a href="/flutter-for-android/">Flutter para Android devs</a></li>
+      <li><a href="/flutter-for-ios/">Flutter para iOS devs</a></li>
+      <li><a href="/flutter-for-react-native/">Flutter para React Native devs</a></li>
+      <li><a href="/flutter-for-xamarin-forms/">Flutter para Xamarin.Forms devs</a></li>
+      <li><a href="/gestures/">Gestos</a></li>
+      <li><a href="/animations/">Animaciones</a></li>
+      <li><a href="/layout/">Box constraints</a></li>
+      <li><a href="/assets-and-images/">Recursos e imágenes</a></li>
+      <li><a href="/tutorials/internationalization">Internacionalización</a></li>
+      <li><a href="/accessibility">Accesibilidad</a></li>
+    </ul>
+
+  <li class="sidebar-title">Utilice dispositivos y SDK APIs</li>
+
+    <ul class="sidebar-items">
+      <li><a href="/using-packages/">Utilizando paquetes</a></li>
+      <li><a href="/developing-packages/">Desarrollando paquetes</a></li>
+      <li><a href="/platform-channels/">Código para plataforma específica</a></li>
+      <li><a href="/json/">JSON y serialización</a></li>
+      {% comment %}
+      <!-- Temporarily removed because the codelab is broken and possibly
+           about to be replaced by a completely new one. -->
+      <li><a href="https://codelabs.developers.google.com/codelabs/flutter-firebase/index.html#0">Firebase para Flutter - Laboratorio</a></li>
+      {% endcomment %}
+    </ul>
+
+  <li class="sidebar-title">Desarrollo y herramientas</li>
+
+    <ul class="sidebar-items">
+      <li><a href="/using-ide/">Utilizando Flutter IDEs</a></li>
+      <li><a href="/hot-reload/">Usando hot reload</a></li>
+      <li><a href="/testing/">Pruebas a tu app</a></li>
+      <li><a href="/debugging/">Depura tu app</a></li>
+      <li><a href="/ui-performance/">Perfiles de rendimiento</a></li>
+      <li><a href="/inspector/">Inspecciona tu UI</a></li>
+      <li><a href="/android-release/">Construir y liberar para Android</a></li>
+      <li><a href="/ios-release/">Construir y liberar para iOS</a></li>
+      <li><a href="/fastlane-cd/">Despliegue continuo (CD) con Fastlane</a></li>
+      <li><a href="/upgrading/">Actualiza tu instalación de Flutter</a></li>
+      <li><a href="/formatting/">Formato de código fuente</a></li>
+    </ul>
+
+  <li class="sidebar-title">Mas detalles</li>
+
+    <ul class="sidebar-items">
+      <li><a href="/faq/">FAQ</a></li>
+      <li><a href="/technical-overview">Vista técnica</a></li>
+      <li><a href="https://docs.google.com/presentation/d/1B3p0kP6NV_XMOimRV09Ms75ymIjU5gr6GGIX74Om_DE/edit?usp=sharing">Presentación de la magia de Flutter</a></li>
+      <li><a href="https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit?usp=sharing">diagramas de arquitectura</a></li>
+      <li><a href="https://www.youtube.com/watch?v=dkyY9WCGMi0">Framework de diseño en capas <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
+      <li><a href="https://www.youtube.com/watch?v=UUfXWzp0-DU">Representación de pipeline en Flutter <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
+    </ul>
+
+</ul>
diff --git a/es_ES/_includes/tip.html b/es_ES/_includes/tip.html
new file mode 100644
index 0000000000..674aaed4c3
--- /dev/null
+++ b/es_ES/_includes/tip.html
@@ -0,0 +1 @@
+<div markdown="span" class="alert alert-success" role="alert"><i class="fa fa-check-square-o"></i> <b>Consejo:</b> {{include.content}}</div>
\ No newline at end of file
diff --git a/es_ES/_includes/warning.html b/es_ES/_includes/warning.html
new file mode 100644
index 0000000000..b61687b7e1
--- /dev/null
+++ b/es_ES/_includes/warning.html
@@ -0,0 +1 @@
+<div markdown="span" class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle"></i> <b>Precaución:</b> {{include.content}}</div>
\ No newline at end of file
diff --git a/es_ES/accessiblity.md b/es_ES/accessiblity.md
new file mode 100644
index 0000000000..d51f87a3ec
--- /dev/null
+++ b/es_ES/accessiblity.md
@@ -0,0 +1,84 @@
+---
+layout: page
+title: Accesibilidad
+
+permalink: /accessibility/
+---
+
+Flutter se compromete a apoyar a los desarrolladores que quieran hacer sus aplicaciones más
+accesibles: utilizable por la mayor cantidad de gente posible, incluidos aquellos con
+discapacidades tales como ceguera o impedimento motor.
+
+* Placeholder for TOC
+{:toc}
+
+# Soporte de accesibilidad de Flutter
+
+Flutter admite tres componentes para el soporte de accesibilidad:
+
+* **[Fuentes grandes](#large-fonts)**: Renderizar widgets de texto con tamaños de fuente especificados por el usuario
+* **[Lectores de pantalla](#screen-reader)**: Comunicar comentarios verbales sobre el contenido de la interfaz de usuario
+* **[Suficiente contraste](#sufficient-contrast)**: Hacer widgets con colores que tengan suficiente contraste
+
+## Inspección del soporte de Accesibilidad
+
+Los detalles de estos se discuten a continuación. Además de las pruebas para estos temas específicos, recomendamos el uso de escáneres de accesibilidad automatizados:
+
+  * Para Android:
+    1. Instale el [Escáner de accesibilidad][accessibility-scanner] para Android
+    1. Habilite el Escáner de Accesibilidad desde Android Settings > Accessibility >
+       Accessibility Scanner > On
+    1. Acceda al botón de icono 'casilla de verificación' del Analizador de accesibilidad para iniciar un escaneo
+  * Para iOS:
+    1. Abra la carpeta `iOS` de su aplicación Flutter en Xcode
+    1. Seleccione un simulador como objetivo y haga clic en el botón Run
+    1. En Xcode, seleccione Xcode > Open Developer Tools > Accessibility Inspector
+    1. En el Inspector de Accesibilidad, seleccione Inspection > Enable Point to
+       Inspect, y luego seleccione los diversos elementos de la interfaz de usuario en la aplicación Flutter para inspeccionar sus atributos de accesibilidad
+    1. En el Inspector de Accesibilidad, seleccione Audit en la barra de herramientas, y luego
+       seleccione Run Audio para obtener un reporte de problemas potenciales.
+
+[accessibility-scanner]: https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en
+
+## Fuentes grandes {#large-fonts}
+
+Tanto Android como iOS contienen configuraciones de sistema para configurar los tamaños de fuente deseados utilizados por las aplicaciones. Los widgets de texto de Flutter respetan esta configuración del sistema operativo cuando se determinan los tamaños de fuente.
+
+### Tips para desarroladores
+
+Los tamaños de fuente son calculados automáticamente por Flutter según la configuración del sistema operativo. Sin embargo, como desarrollador, debe asegurarse de que todos los diseños tengan espacio suficiente para mostrar todos sus contenidos cuando aumente el tamaño de las fuentes. Por ejemplo, puede probar todas las partes de su aplicación en un dispositivo de pantalla pequeña configurado para usar la configuración de fuente más grande.
+
+### Ejemplo
+
+Las siguientes dos capturas de pantalla muestran la plantilla estándar de la aplicación Flutter representada 1) con la configuración de fuente predeterminada de iOS, y 2) con la configuración de fuente más grande seleccionada en la configuración de accesibilidad de iOS.
+
+![Captura de pantalla que muestra una aplicación de Flutter con un tamaño de fuente regular](/images/a18n/a18n-fonts-regular.png)
+![Captura de pantalla que muestra una aplicación de Flutter que utiliza el tamaño de fuente más grande disponible](/images/a18n/a18n-fonts-large.png)
+
+## Lectores de pantalla {#screen-reader}
+
+Lectores de pantalla ([TalkBack][talkback], [VoiceOver][voiceover]) permite a los usuarios con discapacidad visual recibir comentarios por voz sobre el contenido de la pantalla.
+
+### Tips para desarrolladores
+
+Active VoiceOver o TalkBack en tu dispositivo y navega por tu aplicación. Si se encuentra con algún problema, use el [widget Semantics][semanticswidget] para personalizar la experiencia de accesibilidad de su aplicación.
+
+[talkback]: https://support.google.com/accessibility/android/answer/6283677?hl=en
+[voiceover]: https://www.apple.com/lae/accessibility/iphone/vision/
+[semanticswidget]: https://docs.flutter.io/flutter/widgets/Semantics-class.html
+
+## Suficiente contraste {#sufficient-contrast}
+
+El suficiente contraste de color hace que el texto y las imágenes sean más fáciles de leer. Además de beneficiar a los usuarios con diversas discapacidades visuales, el suficiente contraste de color ayuda a todos los usuarios cuando visualizan una interfaz en dispositivos en condiciones de iluminación extrema, como cuando están expuestos a la luz solar directa o en una pantalla con bajo brillo.
+
+La [W3C recomienda](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html):
+
+* Al menos 4.5:1 para texto pequeño (por debajo de 18 puntos regulares o 14 puntos en negrita)
+* Al menos 3.0:1 para texto grande (18 puntos y más arriba de lo normal o 14 puntos y más arriba en negrita)
+
+### Tips para desarrolladores
+
+Asegúrese de que las imágenes que incluya tengan suficiente contraste.
+
+Al especificar colores en widgets, asegúrese de que se use suficiente contraste entre
+selecciones de color en primer plano y fondo.
diff --git a/es_ES/docs.md b/es_ES/docs.md
new file mode 100644
index 0000000000..e6763e0362
--- /dev/null
+++ b/es_ES/docs.md
@@ -0,0 +1,100 @@
+---
+layout: page
+title: Documentación de Flutter
+permalink: /docs/
+---
+
+<ul class="cards">
+{% for card in site.data.docs_cards %}
+	<li class="cards__item">
+	    <div class="card">
+		    <h3 class="catalog-category-title"><a class="action-link" href="{{card.url}}">{{card.name}}</a></h3>
+		    <p>{{card.description}}</p>
+		    <div class="card-action">
+		        <a class="action-link" href="{{card.url}}">VISITAR</a>
+		    </div>
+		</div>
+	</li>
+{% endfor %}
+</ul>
+
+&nbsp;
+
+
+## Nuevo en Flutter?
+
+Una vez que has pasado por [Empezar](/get-started/install/),
+incluido [Escribe tu primera App con Flutter,](/get-started/codelab/)
+aquí tienes algunos pasos para seguir.
+
+* [Flutter para Desarrolladores Android](/flutter-for-android/)<br>
+  Revisa estas notas si tienes experiencia en Android.
+
+* [Patrones HTML/CSS](/web-analogs/)<br>
+  Revisa estas analogías entre HTML y Flutter si tienes experiencia en web.
+
+* [Construye Layouts en Flutter](/tutorials/layout/)<br>
+  Aprende cómo crear layouts en Flutter, donde todo es un widget.
+
+* [Añade Interactividad a tu aplicación Flutter](/tutorials/interactive/)<br>
+  Aprende cómo añadir un stateful widget a tu app.
+
+* [Un Tour por el Framework de Widgets de Flutter](/widgets-intro/)<br>
+  Aprende más sobre el estilo reactivo del framework de Flutter.
+
+&nbsp;
+
+
+## Quieres mejorar tus habilidades?
+
+Cuando domines lo básico, prueba estas páginas.
+
+* [Cookbook](/cookbook/)<br>
+  Una (creciente) colección de recetas que abordan los casos de uso comunes con Flutter.
+
+* [Catálogo de Apps de Ejemplo](/catalog/samples/)<br>
+  Aplicaciones simples que demuestran cómo implementar funcionalidades y widgets.
+
+* [Añadir Assets e Imágenes en Flutter](/assets-and-images/)<br>
+  Cómo añadir recursos a una aplicación en Flutter.
+
+* [Animaciones en Flutter](/animations/)<br>
+  Cómo crear animaciones standard, hero, o staggered, por nombrar algunos estilos de animación que soporta Flutter.
+
+* [Rutas y Navegación](/cookbook/navigation/navigation-basics/)<br>
+  Cómo crear y navegar a una nueva pantalla (llamada
+  _route_ en Flutter).
+
+* [Internacionalización](/tutorials/internationalization/)<br>
+  Sé global! Cómo internacionalizar tu aplicación Flutter.
+
+* [Dart Eficaz](https://www.dartlang.org/guides/language/effective-dart)<br>
+  Guías sobre cómo escribir mejor código con Dart.
+
+&nbsp;
+
+
+## Temas especializados
+
+Sumérgete en los temas que te interesen.
+
+* [Flutter Widget Inspector](/inspector/)<br>
+  Cómo usar el inspector de widgets, una poderosa herramienta que te permite
+  explorar el árbol de widgets, deshabilitar el banner "DEBUG"
+  , mostrar la capa sobrepuesta de rendimiento, y mucho más.
+
+* [Fuentes Propias](/cookbook/design/fonts/)<br>
+  Cómo añadir fuentes a tu aplicación.
+
+* [Text Input](/cookbook/forms/text-input/)<br>
+  Cómo configurar un text input básico.
+
+* [Depurar aplicaciones Flutter](/debugging/)<br>
+  Herramientas y consejos para debugar tu app.
+
+
+&nbsp;
+
+
+Esta no es una lista completa. Por favor usa el menú de navegación izquierdo,
+o el buscador para encontrar otros temas.
diff --git a/es_ES/get-started/codelab/images/AndroidStudioIcon.png b/es_ES/get-started/codelab/images/AndroidStudioIcon.png
new file mode 100644
index 0000000000..1b06c04ccf
Binary files /dev/null and b/es_ES/get-started/codelab/images/AndroidStudioIcon.png differ
diff --git a/es_ES/get-started/codelab/images/green-run.png b/es_ES/get-started/codelab/images/green-run.png
new file mode 100644
index 0000000000..87fa67078d
Binary files /dev/null and b/es_ES/get-started/codelab/images/green-run.png differ
diff --git a/es_ES/get-started/codelab/images/hello-world-screenshot.png b/es_ES/get-started/codelab/images/hello-world-screenshot.png
new file mode 100644
index 0000000000..33cf13e144
Binary files /dev/null and b/es_ES/get-started/codelab/images/hello-world-screenshot.png differ
diff --git a/es_ES/get-started/codelab/images/hot-reload-button.png b/es_ES/get-started/codelab/images/hot-reload-button.png
new file mode 100644
index 0000000000..fdf0c6dfa2
Binary files /dev/null and b/es_ES/get-started/codelab/images/hot-reload-button.png differ
diff --git a/es_ES/get-started/codelab/images/startup-namer-app.gif b/es_ES/get-started/codelab/images/startup-namer-app.gif
new file mode 100644
index 0000000000..1f7e0d0560
Binary files /dev/null and b/es_ES/get-started/codelab/images/startup-namer-app.gif differ
diff --git a/es_ES/get-started/codelab/images/step2-screenshot.png b/es_ES/get-started/codelab/images/step2-screenshot.png
new file mode 100644
index 0000000000..e203858214
Binary files /dev/null and b/es_ES/get-started/codelab/images/step2-screenshot.png differ
diff --git a/es_ES/get-started/codelab/images/step3-screenshot.png b/es_ES/get-started/codelab/images/step3-screenshot.png
new file mode 100644
index 0000000000..1da824b6db
Binary files /dev/null and b/es_ES/get-started/codelab/images/step3-screenshot.png differ
diff --git a/es_ES/get-started/codelab/images/step4-screenshot.png b/es_ES/get-started/codelab/images/step4-screenshot.png
new file mode 100644
index 0000000000..4afdb9dd16
Binary files /dev/null and b/es_ES/get-started/codelab/images/step4-screenshot.png differ
diff --git a/es_ES/get-started/codelab/images/step5-screenshot.png b/es_ES/get-started/codelab/images/step5-screenshot.png
new file mode 100644
index 0000000000..9de8ee1e74
Binary files /dev/null and b/es_ES/get-started/codelab/images/step5-screenshot.png differ
diff --git a/es_ES/get-started/codelab/images/step6a-screenshot.png b/es_ES/get-started/codelab/images/step6a-screenshot.png
new file mode 100644
index 0000000000..3724e2a668
Binary files /dev/null and b/es_ES/get-started/codelab/images/step6a-screenshot.png differ
diff --git a/es_ES/get-started/codelab/images/step6b-screenshot.png b/es_ES/get-started/codelab/images/step6b-screenshot.png
new file mode 100644
index 0000000000..7a622b3a7a
Binary files /dev/null and b/es_ES/get-started/codelab/images/step6b-screenshot.png differ
diff --git a/es_ES/get-started/codelab/images/step7-themes.png b/es_ES/get-started/codelab/images/step7-themes.png
new file mode 100644
index 0000000000..c17da8a4a3
Binary files /dev/null and b/es_ES/get-started/codelab/images/step7-themes.png differ
diff --git a/es_ES/get-started/codelab/index.md b/es_ES/get-started/codelab/index.md
new file mode 100644
index 0000000000..02402a9041
--- /dev/null
+++ b/es_ES/get-started/codelab/index.md
@@ -0,0 +1,936 @@
+---
+layout: tutorial
+title: Escribe tu primer app en Flutter
+permalink: /get-started/codelab/
+image: /get-started/codelab/images/step7-themes.png
+---
+
+<figure class="right-figure" style="max-width: 260px; padding-right: 10px">
+    <img src="images/startup-namer-app.gif"
+         alt="Animated GIF of the app that you will be building."
+         style="border: 10px solid #333; border-radius: 10px; margin-bottom: 10px" >
+</figure>
+
+Esta es una guiá para crear tu primera app en Flutter. Si la
+programación orientada a objetos y conceptos básicos
+de programación como variables, ciclos y condicionales
+podrás completar este tutorial. No se necesita
+experiencia previa con Dart o programación móvil.
+
+{% comment %}
+TODO: (maybe, but later)
+- Retake screenshots on the Android emulator? (Tao)
+  Maybe alternate between Android and iOS emulators?
+- Somehow cross link from code to text so people can restart
+  and find their place more easily? (Tao)
+{% endcomment %}
+
+* TOC
+{:toc}
+
+## Qué haremos
+{:.no_toc}
+
+Se implementará una app móvil sencilla que generará nombres propuestos para un
+empresa que inicia. El usuario puede seleccionar o deseleccionar nombres,
+almacenando los mejores. El código genera nombres de diez en diez.
+A medida que el usuario se desplaza por la pantalla, nuevos juegos de nombres son generados.
+El usuario puede puede tocar el icono de lista en la orilla superior derecha en la barra de la app
+para moverse a una nueva ruta que muestra únicamente los nombre favoritos.
+
+El GIF animado muestra como se verá el producto terminado.
+
+<div class="whats-the-point" markdown="1">
+  <h4>Que aprenderemos</h4>
+
+  * Estructura básica de una app en Flutter.
+  * Encontrar y utilizar paquetes para extender funcionalidades.
+  * Usar hot reload para un ciclo de desarrollo más rápido.
+  * Cómo implementar un "stateful widget".
+  * Cómo crear una lista de carga lenta e infinita.
+  * Cómo crear y navegar a una segunda pantalla.
+  * Cómo cambiar el estilo de una app utilizando "Themes".
+</div>
+
+<div class="whats-the-point" markdown="1">
+  <h4>Qué usaremos</h4>
+
+  Necesitaremos instalar lo siguiente:
+
+  - Flutter SDK<br>
+    El SDK de Flutter incluye el motor de Flutter, framework, widgets, herramientas,
+    y un SDK de Dart. Este laboratorio necesita v0.1.4 o superior.
+
+  - Android Studio IDE<br>
+    Este laboratorio utiliza el IDE de Android Studio, Pero puedes utilizar otro
+    IDE, o trabajar de la linea de comandos.
+
+  - Complementos para el IDE<br>
+    Los complementes de Flutter y Dart deber ser instalado por separado para el
+    IDE. Ademas Android Studio, los complementos Flutter y Dart también están disponibles
+    para los IDEs [VS Code](https://code.visualstudio.com/download) e
+    [IntelliJ](https://www.jetbrains.com/idea/download/#section=mac).
+
+  Vea [Instalación y configuración de Flutter](/get-started/install/) para mas información de
+  como configurar el ambiente de trabajo.
+</div>
+
+# Paso 1: Crear la app inicial de Flutter
+
+Crear un app sencilla desde una plantilla de Flutter, utilizando las instrucciones en
+[Iniciando con tu primer app de Flutter.](/get-started/test-drive/#create-app)
+Nombre del proyecto **startup_namer** (en lugar de _myapp_).
+Modificaras esta app de inicial para crear el app final.
+
+En este laboratorio, mayormente estarás editando **lib/main.dart**,
+donde el código Dart vive.
+
+{{site.alert.tip}}
+  Cuando se pega código dentro de tu app, los margenes pueden
+  moverse. Puedes corregir esto automáticamente con las herramientas de Flutter:
+
+  * Android Studio / IntelliJ IDEA: Clic derecho en el código Dart 
+  y elige **Reformat Code with dartfmt**.
+  * VS Code: Clic derecho y seleccionar **Format Document**.
+  * Terminal: Ejecuta el comando `flutter format <filename>`.
+{{site.alert.end}}
+
+ 1. Reemplaza `lib/main.dart`.<br>
+    Borra todo el código de **lib/main.dart**.
+    Reemplaza con el siguiente código, el cual muestra "Hello World" en el centro
+    de la pantalla. 
+
+    ```dart
+    import 'package:flutter/material.dart';
+
+    void main() => runApp(MyApp());
+
+    class MyApp extends StatelessWidget {
+      @override
+      Widget build(BuildContext context) {
+        return MaterialApp(
+          title: 'Welcome to Flutter',
+          home: Scaffold(
+            appBar: AppBar(
+              title: Text('Welcome to Flutter'),
+            ),
+            body: Center(
+              child: Text('Hello World'),
+            ),
+          ),
+        );
+      }
+    }
+    ```
+
+ 2. Ejecuta el app. Deberás ver la siguiente pantalla.
+
+    <center><img src="images/hello-world-screenshot.png" alt="screenshot of hello world app"></center>
+
+
+## Observaciones
+{:.no_toc}
+
+- Este ejemplo crea una "Material app".
+  [Material](https://material.io/guidelines/) es un lenguaje de diseño visual
+  el cual es un estándar en web y móvil. Flutter ofrece un gran conjunto
+  de "Material widgets".
+- El método main especifica con la siguiente notación de flecha (`=>`),
+  la cual es una manera corta usada para funciones o métodos de una linea.
+- La app hereda de `StatelessWidget` el cual hace a la app misma un
+  widget. En Flutter, casi todo es un widget, incluyendo
+  alignment, padding, y layout.
+- El widget `Scaffold`, de la librería de Material,
+  provee una AppBar por defecto, "title", y una propiedad "body" el cual
+  soporta el árbol de widget para la pantalla de inicio. El subárbol de widget
+  puede ser bastante complejo.
+- El trabajo principal de un widget es proveer un método `build()`
+  el cual describe como mostrar un widget en termino de otro,
+  widgets de bajo nivel.
+- El árbol de widget para este ejemplo consiste en un widget `Center`
+  que contiene un child widget `Text`. El widget `Center` alinea un subárbol de 
+  widgets al centro de la pantalla.
+
+{% comment %}
+  Removing this for now. A) It might be confusing and B) the code as shown here is wrong.
+  <li markdown="1"> Moving the “hello world” text into a separate widget,
+      HelloWorld, results in an identical widget tree as the code above.
+      (This code is informational only. You are starting with the Hello
+      World code above.)
+
+  <!-- skip -->
+  {% prettify dart %}
+  import 'package: flutter/material.dart';
+
+  class MyApp extends StatelessWidget {
+   @override
+   Widget build(BuildContext context) {
+     return MaterialApp(
+       title: 'Welcome to Flutter',
+       home: Scaffold(
+         appBar: AppBar(
+           title: Text('Welcome to Flutter'),
+         ),
+         body: Center(
+           child: Text('Hello World')
+         ),
+       ),
+     );
+   }
+  }
+  {% endprettify %}
+
+  Actualiza con el siguiente código:
+
+  class HelloWorld extends StatelessWidget {
+   @override
+   Widget build(BuildContext context) {
+     return Center(
+       child: Text('Hello World'),
+     );
+   }
+  }
+  </li>
+{% endcomment %}
+
+---
+
+# Paso 2: Usar un paquete externo
+
+En este paso, empezarás utilizando un paquete de código libre llamado
+**english_words**, el cual contiene uno cuantos de miles de las palabras
+en Inglés más utilizadas, además de otras funciones de utilidad.
+
+Puedes encontrar el paquete
+[english_words](https://pub.dartlang.org/packages/english_words),
+así como muchas otros paquetes de código libre en
+[pub.dartlang.org](https://pub.dartlang.org/flutter/).
+
+ 1. El archivo pubspec gestiona los activos para una app Flutter.
+    En **pubspec.yaml**, agrega **english_words** (3.1.0 o mayor)
+    a las lista de dependencias.
+    La nueva linea es resaltada abajo:
+
+    {% prettify yaml %}
+      dependencies:
+        flutter:
+          sdk: flutter
+
+        cupertino_icons: ^0.1.0
+        [[highlight]]english_words: ^3.1.0[[/highlight]]
+    {% endprettify %}
+
+ 2. Mientras vez el pubspec en el editor de Android Studio,
+    clic **Packages get** arriba a la derecha. Esto trae los paquetes dentro
+    del proyecto. Se deberá ver lo siguiente en la consola:
+
+    ```terminal
+    > flutter packages get
+    Running "flutter packages get" in startup_namer...
+    Process finished with exit code 0
+    ```
+
+ 3. En **lib/main.dart**, agrega el "import" para `english_words`,
+    como se muestra resaltado en la linea:
+
+    <!-- skip -->
+    {% prettify dart %}
+      import 'package:flutter/material.dart';
+      [[highlight]]import 'package:english_words/english_words.dart';[[/highlight]]
+    {% endprettify %}
+
+    Mientras tecleas, Android Studio da sugerencias para las bibliotecas a
+    importar. Entonces renderiza el texto de "import" en gris, haciéndote 
+    saber que la librería importada no ha sido utilizada (hasta el momento).
+
+ 4. Usa el paquete de palabras en inglés para generar texto en lugar de
+    utilizar el texto "Hello World".
+
+    {{site.alert.note}}
+      "Pascal case" (también conocido como "upper camel case"),
+      significa que cada palabra en el texto, incluyendo la primera, 
+      empezará con letra mayúscula. Entonces, "uppercamelcase" se convierte
+      "UpperCamelCase".
+    {{site.alert.end}}
+
+    Realiza los siguientes cambios, como se resalta abajo:
+
+    <!-- skip -->
+    {% prettify dart %}
+      import 'package:flutter/material.dart';
+      import 'package:english_words/english_words.dart';
+
+      void main() => runApp(MyApp());
+
+      class MyApp extends StatelessWidget {
+        @override
+        Widget build(BuildContext context) {
+          [[highlight]]final wordPair = WordPair.random();[[/highlight]]
+          return MaterialApp(
+            title: 'Welcome to Flutter',
+            home: Scaffold(
+              appBar: AppBar(
+                title: Text('Welcome to Flutter'),
+              ),
+              body: Center(
+                //child: Text([[highlight]]'Hello World'[[/highlight]]), // Replace the highlighted text...
+                child: Text([[highlight]]wordPair.asPascalCase[[/highlight]]),  // With this highlighted text.
+              ),
+            ),
+          );
+        }
+      }
+    {% endprettify %}
+
+ 5. Si la app esta ejecutándose, utilice el botón de hot reload
+    (<img src="images/hot-reload-button.png" alt="lightning bolt icon">)
+    para actualizar el app. Cada vez que se presione hot reload
+    o se guarde el proyecto, deberá verse una diferente palabra,
+    elegida aleatoria mente, en la app.
+    Esto es debido a que las palabras generadas dentro de el método "build",
+    el cual se ejecuta cada vez que la MaterialApp requiere renderizar
+    o al alternar la plataforma en el inspector de Flutter .
+
+<center><img src="images/step2-screenshot.png" alt="screenshot at completion of second step"></center>
+
+
+## Problemas?
+{:.no_toc}
+
+Si tu app no esta ejecutando correctamente, busque por errores al teclear. De ser necesario,
+use el código en el siguiente enlace y continuar
+
+* [**pubspec.yaml**](https://gist.githubusercontent.com/Sfshaza/bb51e3b7df4ebbf3dfd02a4a38db2655/raw/57c25b976ec34d56591cb898a3df0b320e903b99/pubspec.yaml)
+(El archivo **pubspec.yaml** no cambiara de nuevo.)
+* [**lib/main.dart**](https://gist.githubusercontent.com/Sfshaza/bb51e3b7df4ebbf3dfd02a4a38db2655/raw/57c25b976ec34d56591cb898a3df0b320e903b99/main.dart)
+
+---
+
+# Paso 3: Agregar un Stateful widget
+
+State<em>less</em> widgets son inmutables, esto quiere decir que
+sus propiedades no puedes cambiar&mdash;todos sus valores son finales.
+
+State<em>ful</em> widgets mantienes un estado que puede cambiar
+durante el tiempo de vida del widget. Implementar un stateful
+widget necesitara al menos dos clases: 1) una clase StatefulWidget
+la cual crea la instancia 2) una clase State. La clase StatefulWidget es,
+a si misma, inmutable, pero la clase State persiste sobre el tiempo de
+vida de el widget.
+
+En este paso, agregaras un stateful widget, RandomWords, el cual crea su clase
+State, RandomWordsState. La clase State eventualmente
+mantendrá las palabras propuestas y favoritas para el widget.
+
+ 1. Agrega el stateful RandomWords widget a main.dart.
+    Puede ir en cualquier lugar del archivo, fuera de MyApp, pero la solución
+    la coloca al final del archivo. El RandomWords widget hace poco ademas de 
+    crear su clase State:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWords extends StatefulWidget {
+      @override
+      createState() => RandomWordsState();
+    }
+    {% endprettify %}
+
+ 2. Agrega la clase RandomWordsState. La mayoría de código de la
+    app se encuentra en esta clase, la cual mantiene el estado para el
+    RandomWords widget. Esta clase guardara las palabras generadas,
+    el cual crece infinitamente mientra el usuario de desplaza, y también las palabras
+    favoritas, mientras el usuario agregue o elimine de la lista
+    seleccionando el icono de corazón.
+
+    Creara esta clase poco a poco. Para empezar, creé una clase pequeña
+    y agregue el texto resaltado:
+
+    <!-- skip -->
+    {% prettify dart %}
+    [[highlight]]class RandomWordsState extends State<RandomWords> {[[/highlight]]
+    [[highlight]]}[[/highlight]]
+    {% endprettify %}
+
+ 3. Después de agregar esta clase de estado, el IDE se quejara que
+    a la clase le hace falta el método build. Siguiente, agregar un método
+    build básico que genera el juego de palabras moviendo la
+    generación de código de MyApp a RandomWordsState.
+
+    Agregar el método build a RandomWordState, como se muestra
+    en el siguiente texto resaltado:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWordsState extends State<RandomWords> {
+      [[highlight]]@override[[/highlight]]
+      [[highlight]]Widget build(BuildContext context) {[[/highlight]]
+        [[highlight]]final wordPair = WordPair.random();[[/highlight]]
+        [[highlight]]return Text(wordPair.asPascalCase);[[/highlight]]
+      [[highlight]]}[[/highlight]]
+    }
+    {% endprettify %}
+
+ 4. Elimine la generación de código de MyApp haciendo los
+    cambios resaltados como es la parte de abajo:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class MyApp extends StatelessWidget {
+      @override
+      Widget build(BuildContext context) {
+        [[strike]]final wordPair = WordPair.random();[[/strike]]  // Delete this line
+
+        return MaterialApp(
+          title: 'Welcome to Flutter',
+          home: Scaffold(
+            appBar: AppBar(
+              title: Text('Welcome to Flutter'),
+            ),
+            body: Center(
+              //child: [[highlight]]Text(wordPair.asPascalCase),[[/highlight]] // Change the highlighted text to...
+              child: [[highlight]]RandomWords(),[[/highlight]] // ... this highlighted text
+            ),
+          ),
+        );
+      }
+    }
+    {% endprettify %}
+
+Reinicia la app. Si se intenta un hot reload, podría ver el siguiente mensaje de precaución:
+
+```nocode
+Reloading...
+Not all changed program elements ran during view reassembly; consider
+restarting.
+```
+
+Podría ser un falso positivo, pero considere reiniciar en orden de asegurar estos
+cambios sean reflejados en la UI de la app.
+
+La app deberá mostrar el comportamiento de antes, mostrando un juego de palabras
+cada vez que que se haga un hot reload o guarde la app.
+
+<center><img src="images/step3-screenshot.png" alt="screenshot at completion of third step"></center>
+
+## Problemas?
+{:.no_toc}
+
+Si tu app no esta corriendo correctamente, puede utilizar este código
+de el siguiente enlace y continuar.
+
+* [**lib/main.dart**](https://gist.githubusercontent.com/Sfshaza/d7f13ddd8888556232476be8578efe40/raw/329c397b97309ce99f834bf70ebb90778baa5cfe/main.dart)
+
+---
+
+# Paso 4: Crear un ListView de scroll infinito
+
+En este paso, extenderemos la clase RandomWordsState para generar
+y desplegar una lista de palabras. Mientras el usuario se desplaza, la lista
+lo desplegara en un ListView widget, crecerá infinitamente. El `builder` de fabrica del constructor 
+ListView permite construir un una lista de carga lenta, a petición.
+
+ 1. Agrega una lista `_suggestions` a la clase RandomWordsState
+    para guardar las palabras sugeridas. La variable empieza con
+    un guion bajo (`_`)&mdash;prefijar un identificador con un guión bajo aplica 
+    privacidad en el lenguaje Dart.
+
+    También, agrega una variable `biggerFont` para hacer el tamaño de la fuente mas grande.
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWordsState extends State<RandomWords> {
+      [[highlight]]final _suggestions = <WordPair>[];[[/highlight]]
+
+      [[highlight]]final _biggerFont = const TextStyle(fontSize: 18.0);[[/highlight]]
+      ...
+    }
+    {% endprettify %}
+
+ 2. Agrega la función `_buildSuggestions()` a la clase RandomWordsState.
+    Este método construirá el ListView que despliega las palabras sugeridas.
+
+    La clase ListView provee una propiedad builder, `itemBuilder`,
+    un builder de fabrica y un función callback especificada como función anónima,
+    Dos parámetros se pasan a la función&mdash;El BuildContext, 
+    y un renglón de iteración , `i`. El iterador empieza desde 0 e incrementa
+    cada vez que la función es llamada, un vez cada que un juego de palabras es llamado.
+    Este modelo permite que la lista sugerida crezca infinitamente mientras el usuario se desplaza.
+
+    Agrega las lineas resaltadas abajo:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWordsState extends State<RandomWords> {
+      ...
+      [[highlight]]Widget _buildSuggestions() {[[/highlight]]
+        [[highlight]]return ListView.builder([[/highlight]]
+          [[highlight]]padding: const EdgeInsets.all(16.0),[[/highlight]]
+          // The itemBuilder callback is called once per suggested word pairing,
+          // and places each suggestion into a ListTile row.
+          // For even rows, the function adds a ListTile row for the word pairing.
+          // For odd rows, the function adds a Divider widget to visually
+          // separate the entries. Note that the divider may be difficult
+          // to see on smaller devices.
+          [[highlight]]itemBuilder: (context, i) {[[/highlight]]
+            // Add a one-pixel-high divider widget before each row in theListView.
+            [[highlight]]if (i.isOdd) return Divider();[[/highlight]]
+
+            // The syntax "i ~/ 2" divides i by 2 and returns an integer result.
+            // For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
+            // This calculates the actual number of word pairings in the ListView,
+            // minus the divider widgets.
+            [[highlight]]final index = i ~/ 2;[[/highlight]]
+            // If you've reached the end of the available word pairings...
+            [[highlight]]if (index >= _suggestions.length) {[[/highlight]]
+              // ...then generate 10 more and add them to the suggestions list.
+              [[highlight]]_suggestions.addAll(generateWordPairs().take(10));[[/highlight]]
+            [[highlight]]}[[/highlight]]
+            [[highlight]]return _buildRow(_suggestions[index]);[[/highlight]]
+          [[highlight]]}[[/highlight]]
+        [[highlight]]);[[/highlight]]
+      [[highlight]]}[[/highlight]]
+    }
+    {% endprettify %}
+
+ 3. La función `_buildSuggestions` llama a `_buildRow` una vez por
+    juego de palabras. Esta función despliega un ListTile cada nuevo juego de palabras
+    lo cual permite que los renglones se vean mejor en el siguiente paso.
+
+    Agrega una función `_buildRow` a RandomWordsState:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWordsState extends State<RandomWords> {
+      ...
+
+      [[highlight]]Widget _buildRow(WordPair pair) {[[/highlight]]
+        [[highlight]]return ListTile([[/highlight]]
+          [[highlight]]title: Text([[/highlight]]
+            [[highlight]]pair.asPascalCase,[[/highlight]]
+            [[highlight]]style: _biggerFont,[[/highlight]]
+          [[highlight]]),[[/highlight]]
+        [[highlight]]);[[/highlight]]
+      [[highlight]]}[[/highlight]]
+    }
+    {% endprettify %}
+
+ 4. Actualiza el método de build para RandomWordsState y utilizar
+    `_buildSuggestions()`, en lugar de llamar directamente la librería
+     de generación de palabras. Realice los cambios que están resaltados:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWordsState extends State<RandomWords> {
+      ...
+      @override
+      Widget build(BuildContext context) {
+        [[strike]]final wordPair = WordPair.random();[[/strike]] // Delete these two lines.
+        [[strike]]return Text(wordPair.asPascalCase);[[/strike]]
+        [[highlight]]return Scaffold ([[/highlight]]
+          [[highlight]]appBar: AppBar([[/highlight]]
+            [[highlight]]title: Text('Startup Name Generator'),[[/highlight]]
+          [[highlight]]),[[/highlight]]
+          [[highlight]]body: _buildSuggestions(),[[/highlight]]
+        [[highlight]]);[[/highlight]]
+      }
+      ...
+    }
+    {% endprettify %}
+
+ 5. Actualiza el método build para MyApp.
+    Elimina las instancias de Scaffold y AppBar de MyApp.
+    Estos serán administrados por RandomWordsState, lo cual hará mas fácil
+    de cambiar el nombre de la ruta en la app bar mientras el usuario navegue
+    de una pantalla a otra, en el siguiente paso.
+
+    Reemplace el método original con el método build resaltado abajo:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class MyApp extends StatelessWidget {
+      @override
+      [[highlight]]Widget build(BuildContext context) {[[/highlight]]
+        [[highlight]]return MaterialApp([[/highlight]]
+          [[highlight]]title: 'Startup Name Generator',[[/highlight]]
+          [[highlight]]home: RandomWords(),[[/highlight]]
+        [[highlight]]);[[/highlight]]
+      [[highlight]]}[[/highlight]]
+    }
+    {% endprettify %}
+
+ Reinicie la app. Deberá ver una lista de palabras. Desplazandoce hacia abajo
+ tanto como lo quieras y continuara viendo nuevos juegos de palabras.
+
+<center><img src="images/step4-screenshot.png" alt="screenshot at completion of fourth step"></center>
+
+## Problemas?
+{:.no_toc}
+
+Si tu app no esta funcionando correctamente, puedes ver el código
+en el siguiente enlace y continuar.
+
+* [**lib/main.dart**](https://gist.githubusercontent.com/Sfshaza/d6f9460a04d3a429eb6ac0b0f07da564/raw/34fe240f4122435c871bb737708ee0357741801c/main.dart)
+
+---
+
+# Paso 5: Agregar interactividad.
+
+En este paso, seras capaz de agregar iconos de corazón que puedan tocarse en cada renglón
+cuando el usuario toque una entrada de la lista, se resaltara
+a estado de "favorito", estas palabras serán agregadas o eliminadas 
+al set de guardadas favoritas.
+
+ 1. Agrega un set `_saved` a RandomWordsState. Este set almacenara
+    las palabras favoritas del usuario. Se prefiere utilizar un Set que una List
+    debido a que este tiene una propiedad que no permite entradas duplicadas
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWordsState extends State<RandomWords> {
+      final _suggestions = <WordPair>[];
+
+      [[highlight]]final _saved = Set<WordPair>();[[/highlight]]
+
+      final _biggerFont = const TextStyle(fontSize: 18.0);
+      ...
+    }
+    {% endprettify %}
+
+ 2. En la función `_buildRow`, agrega una verificación `alreadySaved`
+    para asegurar que la palabras ha sido ya agregada a favoritos.
+
+    <!-- skip -->
+    {% prettify dart %}
+      Widget _buildRow(WordPair pair) {
+        [[highlight]]final alreadySaved = _saved.contains(pair);[[/highlight]]
+        ...
+      }
+    {% endprettify %}
+
+ 3. También en `_buildRow()`, agrega un icono con forma de corazón al
+    ListTiles para habilitar que es favorito. Después, agregaremos la posibilidad de
+    interactuar con los iconos de corazón.
+
+    Agrega las lineas resaltadas bajo:
+
+    <!-- skip -->
+    {% prettify dart %}
+      Widget _buildRow(WordPair pair) {
+        final alreadySaved = _saved.contains(pair);
+        return ListTile(
+          title: Text(
+            pair.asPascalCase,
+            style: _biggerFont,
+          ),
+          [[highlight]]trailing: Icon([[/highlight]]
+            [[highlight]]alreadySaved ? Icons.favorite : Icons.favorite_border,[[/highlight]]
+            [[highlight]]color: alreadySaved ? Colors.red : null,[[/highlight]]
+          [[highlight]]),[[/highlight]]
+        );
+      }
+    {% endprettify %}
+
+ 4. Reinicia la app. Deberás de ver corazones en cada renglón, 
+    pero no podrás interactuar con ellos aún.
+
+ 5. Haz los nombre sugeridos se puedan pulsar en la función `_buildRow`. 
+    Si una de las palabras ya fue agregada a favoritas,
+    al pulsarla de nuevo la eliminara de la lista de favoritos.
+    Cuando una palabra sea pulsada, llamara a la función
+    `setState()` notificando al framework que el estado ha cambiado.
+
+    Agregue las lineas resaltadas:
+
+    <!-- skip -->
+    {% prettify dart %}
+      Widget _buildRow(WordPair pair) {
+        final alreadySaved = _saved.contains(pair);
+        return ListTile(
+          title: Text(
+            pair.asPascalCase,
+            style: _biggerFont,
+          ),
+          trailing: Icon(
+            alreadySaved ? Icons.favorite : Icons.favorite_border,
+            color: alreadySaved ? Colors.red : null,
+          ),
+          [[highlight]]onTap: () {[[/highlight]]
+            [[highlight]]setState(() {[[/highlight]]
+              [[highlight]]if (alreadySaved) {[[/highlight]]
+                [[highlight]]_saved.remove(pair);[[/highlight]]
+              [[highlight]]} else {[[/highlight]]
+                [[highlight]]_saved.add(pair);[[/highlight]]
+              [[highlight]]}[[/highlight]]
+            [[highlight]]});[[/highlight]]
+          [[highlight]]},[[/highlight]]
+        );
+      }
+    {% endprettify %}
+
+{{site.alert.tip}}
+  En el framework de estilo reactivo de Flutter, llamar a `setState()`
+  ejecuta una llamada al método `build()` para el objeto State, dando como resultado
+  una actualización de la UI.
+{{site.alert.end}}
+
+Haga hot reload en la app. deberá ser capaz de pulsar cualquier palabra a favorito o quitar de favorito,
+Vea que el pulsar la palabra genera una animación ink splash implícita
+que sale de el lugar que fue pulsado.
+
+<center><img src="images/step5-screenshot.png" alt="screenshot at completion of 5th step"></center>
+
+## Problemas?
+{:.no_toc}
+
+Si tu app no funciona correctamente, puedes usar el código
+en el siguiente enlace y continuar.
+
+* [**lib/main.dart**](https://gist.githubusercontent.com/Sfshaza/936ce0059029a8c6e88aaa826a3789cd/raw/a3065d5c681a81eff32f75a9cd5f4d9a5b24f9ff/main.dart)
+
+---
+
+# Paso 6: Navegar a una nueva pantalla
+
+En este paso, agregaras una nueva pantalla (llamada _route_ en Flutter) esta
+mostrara los favoritos. Aprenderás como navegar entre la página de inicio
+y la ruta nueva.
+
+En Flutter, el Navegator administra la pila de rutas que contiene la app.
+Empujando una rutas a la pila del Navegator, actualizando lo que muestra la ruta.
+Sacando la ruta de la pila del Navegator, regresando lo que mostraba la ruta anterior.
+
+ 1. Agrega un icono de lista a la AppBar en el método build para 
+    RandomWordsState.  Cuando el usuario presione el icono de lista, una nueva 
+    ruta que contiene los artículos favoritos se empuja dentro del Navegator,
+    mostrando el icono.
+
+    {{site.alert.tip}}
+      Algunas propiedades del widget permiten un solo widget (`child`), pero otras propiedades,
+      como `action`, permiten un arreglo de widgets (`children`),
+      como se ve en los corchetes (`[]`).
+    {{site.alert.end}}
+
+    Agregue el icono y su acción correspondiente al método build:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWordsState extends State<RandomWords> {
+      ...
+      @override
+      Widget build(BuildContext context) {
+        return Scaffold(
+          appBar: AppBar(
+            title: Text('Startup Name Generator'),
+            [[highlight]]actions: <Widget>[[[/highlight]]
+              [[highlight]]IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),[[/highlight]]
+            [[highlight]]],[[/highlight]]
+          ),
+          body: _buildSuggestions(),
+        );
+      }
+      ...
+    }
+    {% endprettify %}
+
+ 2. Agregue una función `_pushSaved()` a la clase RandomWordsState.
+
+    <!-- skip -->
+    {% prettify dart %}
+    class RandomWordsState extends State<RandomWords> {
+      ...
+      [[highlight]]void _pushSaved() {[[/highlight]]
+      [[highlight]]}[[/highlight]]
+    }
+    {% endprettify %}
+
+    Hot reload la app. El icono de lista aparecerá en el AppBar.
+    Pulsándolo no hace nada aún, por que la función `_pushSaved` esta vacía.
+
+ 3. Cuando el usuario pulse el icono de lista en el AppBarr,
+    Se construirá una ruta y se meterá dentro de la pila del Navegator.
+    Esta acción cambiara lo que muestra la pantalla a la nueva ruta.
+
+    El contenido para la nueva página es construida en la propiedad `builder` en MaterialPageRoute's `builder`, 
+    en  una función anónima.
+
+    Agregar llamada al Navigator.push, como muestra el código resaltado,
+    el cual empuja la ruta a la pila de Navigator.
+
+    <!-- skip -->
+    {% prettify dart %}
+      [[highlight]]void _pushSaved() {[[/highlight]]
+        [[highlight]]Navigator.of(context).push([[/highlight]]
+        [[highlight]]);[[/highlight]]
+      [[highlight]]}[[/highlight]]
+    {% endprettify %}
+
+ 4. Agrega el MaterialPageRoute y su builder. Por ahora,
+    Agrega el código que genera los renglones de ListTile. El método `divideTiles()`
+    de ListTile agrega un espacio horizontal entre cada ListTile.
+    La variable `divided` mantiene el renglón final, convertida a una lista
+    por la función de conveniencia, `toList()`.
+
+    <!-- skip -->
+    {% prettify dart %}
+      void _pushSaved() {
+        Navigator.of(context).push(
+          [[highlight]]MaterialPageRoute([[/highlight]]
+            [[highlight]]builder: (context) {[[/highlight]]
+              [[highlight]]final tiles = _saved.map([[/highlight]]
+                [[highlight]](pair) {[[/highlight]]
+                  [[highlight]]return ListTile([[/highlight]]
+                    [[highlight]]title: Text([[/highlight]]
+                      [[highlight]]pair.asPascalCase,[[/highlight]]
+                      [[highlight]]style: _biggerFont,[[/highlight]]
+                    [[highlight]]),[[/highlight]]
+                  [[highlight]]);[[/highlight]]
+                [[highlight]]},[[/highlight]]
+              [[highlight]]);[[/highlight]]
+              [[highlight]]final divided = ListTile[[/highlight]]
+                [[highlight]].divideTiles([[/highlight]]
+                  [[highlight]]context: context,[[/highlight]]
+                  [[highlight]]tiles: tiles,[[/highlight]]
+                [[highlight]])[[/highlight]]
+                [[highlight]].toList();[[/highlight]]
+            [[highlight]]},[[/highlight]]
+          [[highlight]]),[[/highlight]]
+        );
+      }
+    {% endprettify %}
+
+ 5. La propiedad builder regresa un Scaffold,
+    contiene la AppBar para una nueva ruta, llamada
+    "Saved Suggestions". El body de la ruta nueva
+    consiste de un ListView que contiene los renglones del ListTiles;
+    cada renglón es separado por un divisor.
+
+    Agregue el código resaltado abajo:
+
+    <!-- skip -->
+    {% prettify dart %}
+      void _pushSaved() {
+        Navigator.of(context).push(
+          MaterialPageRoute(
+            builder: (context) {
+              final tiles = _saved.map(
+                (pair) {
+                  return ListTile(
+                    title: Text(
+                      pair.asPascalCase,
+                      style: _biggerFont,
+                    ),
+                  );
+                },
+              );
+              final divided = ListTile
+                .divideTiles(
+                  context: context,
+                  tiles: tiles,
+                )
+                .toList();
+
+              [[highlight]]return Scaffold([[/highlight]]
+                [[highlight]]appBar: AppBar([[/highlight]]
+                  [[highlight]]title: Text('Saved Suggestions'),[[/highlight]]
+                [[highlight]]),[[/highlight]]
+                [[highlight]]body: ListView(children: divided),[[/highlight]]
+              [[highlight]]);[[/highlight]]
+            },
+          ),
+        );
+      }
+    {% endprettify %}
+
+ 6. Hot reload la app. Seleccione como favoritas algunas y
+    pulse el icono de lista en la AppBar. La nueva ruta aparecerá conteniendo
+    los favoritos. Vea que el Navegator agrega un boton de "Back" al AppBarr.
+    No se necesita implementar explícitamente `Navigator.pop`.
+    Pulse el botón de "Back" para regresar a la ruta de inicio.
+
+<center>
+  <img src="images/step6a-screenshot.png" alt="screenshot at completion of 6th step">
+  <img src="images/step6b-screenshot.png" alt="second route">
+</center>
+
+## Problemas?
+{:.no_toc}
+
+Si tu app no funciona correctamente, puedes utilizar el código
+en el siguiente enlace y continuar.
+
+* [**lib/main.dart**](https://gist.github.com/Sfshaza/bc5547e112e4dc3a1aa87afdf917caeb)
+
+---
+
+# Paso 7: Cambiar la UI utilizando Temas.
+
+En este paso final, jugaremos un poco con el tema de la app. El
+_theme_ controla como se ve y se siente tu app. Puedes usar un tema
+por defecto, el cual depende del dispositivo físico o emulador,
+o puedes crear un tema personalizado que refleje tu branding.
+
+ 1. Puedes fácilmente cambiar el tema de una app configurando
+    la clase ThemeData. Tu app actualmente utiliza el tema por defecto,
+    pero puedes cambiar el color primario a blanco.
+
+    Cambiar el tema de la app a blanco agregando el código resaltado a MyApp:
+
+    <!-- skip -->
+    {% prettify dart %}
+    class MyApp extends StatelessWidget {
+      @override
+      Widget build(BuildContext context) {
+        return MaterialApp(
+          title: 'Startup Name Generator',
+          [[highlight]]theme: ThemeData([[/highlight]]
+            [[highlight]]primaryColor: Colors.white,[[/highlight]]
+          [[highlight]]),[[/highlight]]
+          home: RandomWords(),
+        );
+      }
+    }
+    {% endprettify %}
+
+ 2. Hot reload la app. vea que ahora el fondo es completamente blanco,
+    hasta el app bar.
+
+ 3. Como ejercicio para el lector, utilice
+    [ThemeData](https://docs.flutter.io/flutter/material/ThemeData-class.html)
+    para cambiar otros aspectos de la UI. La
+    [Colors](https://docs.flutter.io/flutter/material/Colors-class.html)
+    clase que se proveé en Material library tiene muchas constantes de color con las cual se puede jugar,
+    y hot reload permite experimentar con la UI fácil y rápido.
+
+<center><img src="images/step7-themes.png" alt="screenshot at completion of 7th step"></center>
+
+## Problemas?
+{:.no_toc}
+
+Si te has salido del camino, usa el código de el siguiente enlace
+y ve el código final de la app.
+
+* [**lib/main.dart**](https://gist.githubusercontent.com/Sfshaza/c07c91a4061fce4b5eacaaf4d82e4993/raw/4001a72c0133b97c8e16bdeb3195ca03525696bd/main.dart)
+
+---
+
+# Bien hecho!
+
+Has escrito una app interactiva en Flutter que se ejecuta en ambos iOS y Android
+
+En este laboratorio, tu has:
+
+* Creaste una app de Flutter desde cero.
+* Escrita en código Dart.
+* Utilizando una librería externa de un tercero.
+* Usaste hot reload para un ciclo de desarrollo mas rápido.
+* Implementaste un stateful widget, agregando interactividad a tu app.
+* Creaste una lista de carga lenta, mostrando un desplazamiento infinito con un
+  ListView y ListTiles.
+* Creaste una ruta y agregaste lógica de movimiento entre la ruta de inicio
+  y la ruta nueva.
+* Aprendiste como cambiar el estilo de tu app utilizando Themes.
+
+## Siguiente paso
+{:.no_toc}
+
+[Aprender mas](/get-started/learn-more/)
diff --git a/es_ES/get-started/editor.md b/es_ES/get-started/editor.md
new file mode 100644
index 0000000000..9170ed9912
--- /dev/null
+++ b/es_ES/get-started/editor.md
@@ -0,0 +1,93 @@
+---
+layout: page
+title: "Empezar: Configurar Editor"
+permalink: /get-started/editor/
+---
+
+Usted puede construir apps con Flutter utilizando cualquier editor de texto combinando con nuestras
+herramientas en línea de comando. De cualquier manera, recomendamos utilizar alguno de nuestros plugin para una
+mejor experiencia. Con nuestros plugins de edición, usted podrá auto completar código, sintaxis resaltada, asistencia al editar widgets, apoyo para ejecutar & depurar, y más. 
+
+Siga los siguientes pasos para agregar un complemento al editor para Androind Studio, IntelliJ 
+o VS Code. Si quiere utilizar un editor diferente, está bien, simplemente salte al 
+[siguiente paso: crear y ejecutar tu primer app](/get-started/test-drive/).
+
+<div id="tab-set-install">
+
+<ul class="tabs__top-bar">
+    <li class="tab-link current" data-tab="tab-install-androidstudio">Android Studio</li>
+    <li class="tab-link" data-tab="tab-install-vscode">VS Code</li>
+</ul>
+
+<div id="tab-install-androidstudio" class="tabs__content current" markdown="1">
+
+## Configuración Android Studio
+
+*Android Studio:* Un experiencia completa e integrada del IDE para Flutter. 
+
+### Instalar Android Studio
+
+   * [Android Studio](https://developer.android.com/studio/index.html), version 3.0 o superior.
+
+Otra opción puede ser utilizar IntelliJ:
+
+   * [IntelliJ IDEA Community](https://www.jetbrains.com/idea/download/), version 2017.1 o superior.
+   * [IntelliJ IDEA Ultimate](https://www.jetbrains.com/idea/download/), version 2017.1 o superior.
+
+### Instalar los complementos de Flutter y Dart
+
+Flutter es compatible por dos plugins:
+
+   * El complemento de `Flutter` le da el poder de desarrollo a Flutter (ejecutar,
+     depurar, hot reload, etc.).
+   * El complemento de `Dart` ofrece análisis de código (validación de código como su tipo, auto completar
+     código, etc.).
+
+Para instalar:
+
+   1. Inicie Android Studio.
+   1. Abra preferecias de complementos (**Preferences>Plugins** en macOS,
+      **File>Settings>Plugins** en Windows & Linux).
+   1. Seleccione **Browse repositories…**,  elige el complemento de Flutter y presione
+      `install`.
+   1. Presione `Yes` cuando aparezca para instalar el complemento de Dart.
+   1. Presione `Restart` cuando aparezca.
+
+</div>
+
+<div id="tab-install-vscode" class="tabs__content" markdown="1">
+
+## Configuración de Visual Studio Code (VS Code)
+
+*VS Code:* Un editor ligero con Flutter, asistencia al ejecutar y depurar.
+
+### Instalar VS Code
+
+  * [VS Code](https://code.visualstudio.com/), La versión estable mas reciente.
+
+### Instalar el complemento de Flutter 
+
+  1. Inicie VS Code
+  1. Llame **View>Command Palette...**
+  1. Teclee 'install', y seleccione la acción **'Extensions: Install Extension'**
+  1. Introduzca `flutter` en el campo de busqueda, seleccione 'Flutter' en la lista, 
+     y presione **Install**
+  1. Seleccione 'OK' para recargar VS Code
+
+## Valida tu configuración con Flutter Doctor
+
+  1. Llame a **View>Command Palette...**
+  1. Teclee 'doctor', y seleccione la acción **'Flutter: Run Flutter Doctor'** 
+  1. Revise la salida en el panel 'OUTPUT' para cualquier inconveniente.
+
+</div>
+
+</div>
+
+## Siguiente paso
+
+Hagamos una prueba: crea un proyecto, ejecútalo y 
+experimenta 'hot reload'.
+
+
+[Siguiente paso: Prueba Flutter](/get-started/test-drive/)
diff --git a/es_ES/get-started/index.md b/es_ES/get-started/index.md
new file mode 100644
index 0000000000..2d71dfa125
--- /dev/null
+++ b/es_ES/get-started/index.md
@@ -0,0 +1,17 @@
+---
+layout: page
+title: "Empezar: Resumen"
+permalink: /get-started/
+---
+
+Bienvenido a la Experiencia de Empezar con Flutter. Te ayudaremos a:
+
+* Instalar el framework Flutter
+* Instalar las dependencias de el framework de Flutter
+* Crear, ejecutar y hacer cambios en tu primer app en Flutter
+* Aprender Flutter desde su origen a través de lecciones con pequeños pasos
+* Sugerir los siguiente pasos 
+
+## Siguiente Paso
+
+[Siguiente paso: Instalar Flutter](/get-started/install/)
\ No newline at end of file
diff --git a/es_ES/get-started/install.md b/es_ES/get-started/install.md
new file mode 100644
index 0000000000..1457323555
--- /dev/null
+++ b/es_ES/get-started/install.md
@@ -0,0 +1,18 @@
+---
+layout: page
+title: "Empezar: Instalación"
+permalink: /get-started/install/
+---
+
+Por favor selecciona el sistema operativo en el cual se instalara Flutter:
+
+<div class="homepage__button_row">
+  <a href="/setup-windows" class="get-started-button">Instalación en Windows</a>
+  <a href="/setup-macos" class="get-started-button">Instalación en macOS</a>
+  <a href="/setup-linux" class="get-started-button">Instalación en Linux</a>
+</div>
+
+{% include note.html content="_Si usted se encuentra en china, por favor lea
+[este articulo](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China)
+primero_." 
+%}
diff --git a/es_ES/get-started/learn-more.md b/es_ES/get-started/learn-more.md
new file mode 100644
index 0000000000..b99d76e2cf
--- /dev/null
+++ b/es_ES/get-started/learn-more.md
@@ -0,0 +1,29 @@
+---
+layout: page
+title: "Empezar: Aprender Mas"
+permalink: /get-started/learn-more/
+---
+
+Aprender mas acerca del framework de Flutter:
+
+* [Flutter para Android](/flutter-for-android/)
+* [Flutter para iOS](/flutter-for-ios/)
+* [Flutter para React Native](/flutter-for-react-native/)
+* [Flutter para Xamarin.Forms](/flutter-for-xamarin-forms/)
+* [Contruyendo Layouts en Flutter](/tutorials/layout/) tutorial
+* [Agregar Interactividad](/tutorials/interactive/) tutorial
+* [Un Tour de widgets en Flutter](/widgets-intro/)
+* [Flutter para desarrolladores de Android](/flutter-for-android/)
+
+Otras fuentes:
+
+* [Udacity entrenamiento en línea para Flutter](https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905)
+* [Recetario de Flutter](/cookbook/)
+* [De Java a Dart](https://codelabs.developers.google.com/codelabs/from-java-to-dart/#0) laboratorio
+* [Bootstrap dentro de Dart: aprender mas acerca del lenguaje](/bootstrap-into-dart/)
+
+Por favor contáctanos a nuestra [lista de correo][]. Nos gustaria saber de ti.
+
+Happy Fluttering!
+
+[mailing list]: mailto:flutter-dev@googlegroups.com
diff --git a/es_ES/get-started/setup_linux.md b/es_ES/get-started/setup_linux.md
new file mode 100644
index 0000000000..a02ec04ee1
--- /dev/null
+++ b/es_ES/get-started/setup_linux.md
@@ -0,0 +1,20 @@
+---
+layout: page
+title: "Iniciar: Instalación en Linux"
+permalink: /setup-linux/
+---
+
+* TOC Placeholder
+{:toc}
+
+{% include setup/system-linux.md %}
+
+{% include setup/get-sdk.md %} 
+
+{% include setup/path-mac-linux.md %}
+
+{% include setup/android-setup.md %}
+
+## Siguiente paso
+
+[Siguiente paso: Configurar Editor](/get-started/editor/)
diff --git a/es_ES/get-started/setup_macos.md b/es_ES/get-started/setup_macos.md
new file mode 100644
index 0000000000..e1674d08fb
--- /dev/null
+++ b/es_ES/get-started/setup_macos.md
@@ -0,0 +1,28 @@
+---
+layout: page
+title: "Iniciar: Instalación en macOS"
+permalink: /setup-macos/
+---
+
+* TOC Placeholder
+{:toc}
+
+{% include setup/system-mac.md %}
+
+{% include setup/get-sdk.md %} 
+
+{% include setup/path-mac-linux.md %}
+
+## Configurar plataforma
+
+macOS permite desarrollar apps con Fluter para ambos iOS y Android. Termine al menos
+una de las configuraciones para las pltaformas ahora, para poder ser capaz de crear y ejecutar
+su primera app en Flutter.
+
+{% include setup/ios-setup.md %}
+
+{% include setup/android-setup.md %}
+
+## Siguiente paso
+
+[Siguiente Paso: Configurar su editor](/get-started/editor/)
diff --git a/es_ES/get-started/setup_windows.md b/es_ES/get-started/setup_windows.md
new file mode 100644
index 0000000000..1b6a548a2b
--- /dev/null
+++ b/es_ES/get-started/setup_windows.md
@@ -0,0 +1,18 @@
+---
+layout: page
+title: "Iniciar: Instalación en Windows"
+permalink: /setup-windows/
+---
+
+* TOC Placeholder
+{:toc}
+
+{% include setup/system-win.md %}
+
+{% include setup/get-sdk-win.md %}
+
+{% include setup/android-setup.md %}
+
+## Siguiente paso
+
+[Siguiente Paso: Configurar su editor](/get-started/editor/)
diff --git a/es_ES/get-started/test-drive.md b/es_ES/get-started/test-drive.md
new file mode 100644
index 0000000000..13801e505a
--- /dev/null
+++ b/es_ES/get-started/test-drive.md
@@ -0,0 +1,179 @@
+---
+layout: page
+title: "Empezar: Prueba Inicial"
+permalink: /get-started/test-drive/
+---
+
+Esta página describe como hacer tu prueba inicial en Flutter: crear una nueva app de Flutter 
+con nuestras plantillas, ejecutarla, y aprender cómo hacer cambios con "Hot Reload".
+
+Flutter es un juego de herramientas flexible, por favor empieza por seleccionar tu herramienta
+de desarrollo favorita para escribir, crear y ejecutar tus apps de Flutter.
+
+<div id="tab-set-install">
+
+<ul class="tabs__top-bar">
+    <li class="tab-link current" data-tab="tab-install-androidstudio">Android Studio</li>
+    <li class="tab-link" data-tab="tab-install-vscode">VS Code</li>
+    <li class="tab-link" data-tab="tab-install-terminal">Terminal + editor</li>
+</ul>
+
+<div id="tab-install-androidstudio" class="tabs__content current" markdown="1">
+
+*Android Studio:* Un experiencia completa e integrada del IDE para Flutter. 
+
+## Crear una app nueva {#create-app}
+
+   1. Seleccionar **File > New Flutter Project**
+   1. Seleccionar **Flutter application** como tipo de proyecto, y presionar siguiente
+   1. Introducir nombre de proyecto (ej. `myapp`), y presionar siguiente
+   1. Clic en **Finish**
+   1. Espera mientras Android Studio instala el SDK, y crear el proyecto.
+
+Los comandos de arriba crean un directorio para el proyecto llamado `myapp`
+el cual contiene una app demo sencilla
+que utiliza [Material Components](https://material.io/guidelines/).
+
+Dentro del directorio del proyecto, el código de tu app, esta en `lib/main.dart`.
+
+## Ejecutar app
+
+   1. Localiza la barra de herramientas principal de Android Studio:<br>
+      ![Main IntelliJ toolbar](/images/intellij/main-toolbar.png)
+   1. En el **target selector**, selecciona un dispositivo android para ejecutar la app.
+      Si ninguno esta en la lista como disponible, selecciona **Tools> Android > AVD Manager** y
+      crea uno ahí mismo. Para mas detalle, vea [Administrando
+      AVDs](https://developer.android.com/studio/run/managing-avds.html).
+   1. Clic en el **Run icon** en la barra de herramientas, seleccionar **Run >
+      Run** del menú.
+   1. Si todo funciona, deberás de ver iniciar tu app en el dispositivo o 
+      simulador:<br>
+      ![App iniciada en Android](/images/flutter-starter-app-android.png)
+
+## Probando hot reload
+
+Flutter ofrece un ciclo de desarrollo rápido con _hot reaload_, la habilidad de recargar 
+el código en una app ejecutando en vivo sin reiniciar o perder el estado de la app. simplemente
+hace un cambio a tu código fuente, diciéndole a tu IDE o herramienta de linea de comandos que
+quieres recargar, y ver los cambio en tu simulador, emulador, o dispositivo.
+
+  1. Cambia el texto<br>`'You have pushed the button this many times:'`
+     a<br>`'You have clicked the button this many times:'`
+  1. No presione el botón de 'Stop'; permita que su app continué ejecutándose.
+  1. Para ver tus cambios presione **Save All**, o clic
+     **Hot Reload** (el botón con el icono del relámpago).
+
+Deberás ver como el texto actualizado en la app ejecutándose casi inmediatamente.
+
+</div>
+
+<div id="tab-install-vscode" class="tabs__content" markdown="1">
+
+*VS Code:* Un editor ligero con Flutter, asistencia al correr y depurar.
+
+## Crear una nueva app
+
+  1. Iniciar VS Code
+  1. llamar **View > Command Palette**
+  1. Teclea "flutter", y selecciona la acción **Flutter: New Project**
+  1. Introducir el nombre del proyecto (como `myapp`), y presiona **Enter**
+  1. Crear o seleccionar el directorio padre para el nuevo folder del proyecto
+  1. Espera la creación del proyecto y completar la generación de el archivo `main.dart` y que
+     aparezca.
+
+Los comando de arriba crean un directorio para el proyecto llamado `myapp`
+el cual contiene una app demo sencilla
+que utiliza [Material Components](https://material.io/guidelines/).
+
+Dentro del directorio del proyecto, el código de tu app esta en `lib/main.dart`.
+
+## Ejecutar app
+
+ 1. Localizar la barra de estado de VS Code(la barra azul en la parte de abajo de la ventana)
+ 1. Seleccionar el dispositivo de el área de **Device Selector**.
+    Para detalles, vea [Cambio rápido entre dispositivos de Flutter][].
+    - Si no se encuentra ningún dispositivo disponible y prefieres usar un simulador,
+      clic **No Devices** y lance un simulador.
+    - Para configurar un dispositivo real, siga las instrucciones para el dispositivo en específico para [empezar: instalar](/get-started/install) en el SO que utilice.
+ 1. llamar a **Debug > Start Debugging** o presionar <kbd>F5</kbd>
+ 1. Espere que el app sea lanzada &mdash; el progreso se imprimirá en la vista de
+    **Debug Console**
+ 1. Si todo funciona, después de que la app sea construida, podrá ver
+    la app iniciada en su dispositivo:<br>
+    ![App Iniciada en Android](/images/flutter-starter-app-android.png)
+
+[Cambio rápido entre dispositivos de Flutter]: https://dartcode.org/docs/quickly-switching-between-flutter-devices
+
+## Probando el hot reload
+
+Flutter ofrece un ciclo de desarrollo rápido con _hot reload_, la habilidad de recargar 
+el código en una app ejecutando en vivo sin reiniciar o perder el estado de la app. simplemente
+hace un cambio a tu código fuente, diciéndole a tu IDE o herramienta de linea de comandos que
+quieres recargar, y ver los cambio en tu simulador, emulador, o dispositivo.
+
+  1. Cambia el texto<br>`'You have pushed the button this many times:'`
+     a<br>`'You have clicked the button this many times:'`
+  1. No presione el botón de 'Stop'; permita que su app continué ejecutándose.
+  1. Para ver tus cambios presione **Save All**, o clic
+     **Hot Reload** (el botón con el icono del relámpago).
+
+Deberás ver como el texto actualizado en la app ejecutándose casi inmediatamente.
+
+</div>
+
+<div id="tab-install-terminal" class="tabs__content" markdown="1">
+
+*Terminal + editor:* Su editor de elección combinado con herramienta de terminal de Flutter
+para ejecutar y construir.
+
+## Crear una nueva app
+
+   1. Use el comando `flutter create` para crear un nuevo proyecto:
+   {% commandline %}
+   flutter create myapp
+   cd myapp
+   {% endcommandline %}
+
+El comando de arriba crea el directorio del proyecto de Flutter llamado `myapp` el cual
+contiene una app demo sencilla que utiliza
+[Material Components](https://material.io/guidelines/).
+
+Dentro del directorio del proyecto, el código de tu app esta en `lib/main.dart`.
+
+## Ejecutar app
+
+   * Verifica que un dispositivo Android se este ejecutando. Si no se muestra ninguno, vea
+     [configuración](/get-started/install/).
+   {% commandline %}
+   flutter devices
+   {% endcommandline %}
+   * Ejecuta la app con el comando `flutter run`:
+   {% commandline %}
+   flutter run
+   {% endcommandline %}
+   * Si todo funciona, después de que la app sea construida, deberás ver tu app iniciada en el dispositivo o simulador:<br>
+      ![App Iniciada en Android](/images/flutter-starter-app-android.png)
+
+## Probando el hot reload
+
+Flutter ofrece un ciclo de desarrollo rápido con _hot reload_, la habilidad de recargar 
+el código en una app ejecutando en vivo sin reiniciar o perder el estado de la app. simplemente
+hace un cambio a tu código fuente, diciéndole a tu IDE o herramienta de línea de comandos que
+quieres recargar, y ver los cambio en tu simulador, emulador, o dispositivo.
+
+  1. Cambia el texto<br>`'You have pushed the button this many times:'`
+     a<br>`'You have clicked the button this many times:'`
+  1. No presione el botón de 'Stop'; permita que su app continué ejecutándose.
+  1. Para ver tus cambios presione **Save All**, o clic
+     **Hot Reload** (el botón con el icono del relámpago).
+
+
+</div>
+
+</div>
+
+## Siguiente paso
+
+Aprendamos algunos conceptos del núcleo de Flutter, creando una pequeña app
+
+[Siguiente paso: Escribir tu primera app](/get-started/codelab/)
diff --git a/es_ES/index.md b/es_ES/index.md
new file mode 100644
index 0000000000..76a68231c9
--- /dev/null
+++ b/es_ES/index.md
@@ -0,0 +1,295 @@
+---
+title: Flutter - Crea hermosas aplicaciones nativas en tiempo récord
+layout: page
+homepage: true
+hide_title: true
+permalink: /
+description: >
+  Flutter es el SDK de aplicaciones móviles de Google para crear interfaces nativas de alta calidad en iOS y Android en un tiempo récord. Flutter funciona con código existente, es utilizado por desarrolladores y organizaciones de todo el mundo, y es gratuito y de código abierto.
+---
+
+<div class="homepage__illustration">
+    <h1 class="homepage__illustration--text">
+        <span>Último release:</span>
+        &nbsp;
+        <a href="https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a?linkId=53249457">Flutter Release Preview 1</a>
+    </h1>
+    <img src="images/homepage/header-illustration.png"
+         class="homepage__illustration--image"
+         alt="Ilustración con un teléfono móvil, un lápiz y un dibujo abstracto de widgets.">
+</div>
+
+<section class="homepage__key_points card">
+    <h1 class="homepage__title">
+        Crea bellas aplicaciones nativas en tiempo récord
+    </h1>
+
+    <div class="homepage__tagline">
+    Flutter es el SDK de aplicaciones móviles de Google
+    para crear interfaces nativas de alta calidad
+    en iOS y Android en un tiempo récord. Flutter funciona con código existente,
+    es utilizado por desarrolladores y organizaciones de todo el mundo,
+    y es gratuito y de código abierto.
+    </div>
+
+    <div class="homepage__button_row">
+    <a href="/get-started/install/" class="get-started-button">Empezar</a>
+    </div>
+
+    <div class="key-points">
+
+        <div class="homepage__key_point">
+            <div class="homepage__key_point_title">Desarrollo rápido</div>
+
+            <p>
+            Hot Reload en milisegundos para dar vida a tu aplicación.
+            Utilice un amplio conjunto de widgets totalmente personalizables para construir interfaces nativas en minutos.
+            </p>
+        </div>
+
+        <div class="homepage__key_point">
+            <div class="homepage__key_point_title">UI flexible y expresiva</div>
+
+            <p>
+            Genere rápidamente las funcionalidades con el foco puesto en una experiencia de usuario nativa.
+            La arquitectura en capas permite una personalización completa,
+            lo que resulta en una renderización increíblemente rápida y diseños expresivos y flexibles.
+            </p>
+        </div>
+
+        <div class="homepage__key_point">
+            <div class="homepage__key_point_title">Rendimiento nativo</div>
+
+            <p>
+            Los widgets de Flutter incorporan todas las diferencias críticas de la plataforma, como el scroll, la navegación, los íconos y las fuentes, para proporcionar un rendimiento nativo completo tanto en iOS como en Android.
+            </p>
+        </div>
+
+    </div>
+</section>
+
+<section class="homepage__hot_reload card">
+    <h1>Desarrollo rápido</h1>
+
+    <p>
+        El <em>hot reload</em> de Flutter te ayuda a experimentar rápida y fácilmente, crear interfaces de usuario, agregar funcionalidades y corregir errores más rápido. Experimenta tiempos de recarga menores a un segundo, sin perder el estado de la aplicación, en emuladores, simuladores y hardware para iOS y Android. 
+    </p>
+
+    <div class="hot-reload-gif-container">
+        <img src="/images/intellij/hot-reload.gif" class="hot-reload-gif" alt="Haz un cambio en tu código y tu aplicación cambia instantáneamente.">
+    </div>
+</section>
+
+<section class="homepage__beautiful_uis card ">
+    <h1>Interfaces de usuario bellas y expresivas.</h1>
+
+    <p>
+    Deleita a tus usuarios con los hermosos widgets incorporados 
+    en Material Design y Cupertino(iOS-flavor) de Flutter, rica APIs de movimiento, suave scroll natural, y conocimiento de la plataforma.
+
+    </p>
+
+    <div class="screenshot-list">
+        <img class="screenshot" src="/images/homepage/screenshot-1.png" width="270" height="480" alt="Brand-first shopping design">
+        <img class="screenshot" src="/images/homepage/screenshot-2.png" width="270" height="480" alt="Fitness app design">
+        <img class="screenshot" src="/images/homepage/screenshot-3.png" width="270" height="480" alt="Contact app design">
+        <img class="screenshot" src="/images/homepage/ios-friendlychat.png" width="270" height="480" alt="iOS chat app design">
+    </div>
+
+    <p>
+    Navega por el <a href="/widgets/">catálogo de widget</a>.
+    </p>
+</section>
+
+<section class="homepage__reactive_framework card">
+    <h1>Framework moderno y reactivo</h1>
+
+    <p>
+    Componga fácilmente su interfaz de usuario con el moderno framework reactivo de Flutter y un amplio conjunto de widgets, de plataforma, de layout y básicos.
+    Resuelva sus desafíos de interfaz de usuario con poderosas y flexibles APIs para 2D, animación, gestos, efectos y más.
+    </p>
+
+{% prettify dart %}
+class CounterState extends State<Counter> {
+  int counter = 0;
+
+  void increment() {
+    // Avisa al framework de Flutter que este estado ha cambiado,
+    // entonces el framework puede ejecutar build() y actualizar la pantalla.
+    setState(() {
+      counter++;
+    });
+  }
+
+  Widget build(BuildContext context) {
+    // Este método es ejecutado cada vez que setState es llamado.
+    // El framework de Flutter ha sido optimizado para rellamar
+    // los metodos build rápido, para que puedas reconstruir cualquier cosa
+    // que necesite actualizarse en lugar de tener que cambiar individualmente
+    // instancias de widgets.
+    return Row(
+      children: <Widget>[
+        RaisedButton(
+          onPressed: increment,
+          child: Text('Increment'),
+        ),
+        Text('Count: $counter'),
+      ],
+    );
+  }
+}
+{% endprettify %}
+
+    <p>
+    Explora el <a href="/widgets/">catálogo de widgets</a>
+    y aprende más sobre el  <a href="/widgets-intro/">framework reactivo</a>.
+    </p>
+
+</section>
+
+<section class="homepage__interop card">
+    <h1>Accede a funcionalidades y SDKs nativos</h1>
+
+    <p>
+    Haz que tu aplicación cobre vida
+    con las APIs de cada plataforma, SDKs de terceros
+    y código nativo.
+    Flutter te permite reutilizar tu código existente en Java, Swift y Objective C
+    y acceder a funcionalidades nativas y SDKs en iOS y Android.
+    </p>
+
+    <p>
+    Acceder a las funcionalidades de cada plataforma es facil. Aqui hay un snippet de nuestro <a href="https://github.com/flutter/flutter/tree/master/examples/platform_channel"> repositorio de ejemplos</a>:
+    </p>
+
+{% prettify dart %}
+Future<Null> getBatteryLevel() async {
+  var batteryLevel = 'unknown';
+  try {
+    int result = await methodChannel.invokeMethod('getBatteryLevel');
+    batteryLevel = 'Battery level: $result%';
+  } on PlatformException {
+    batteryLevel = 'Failed to get battery level.';
+  }
+  setState(() {
+    _batteryLevel = batteryLevel;
+  });
+}
+{% endprettify %}
+
+    <p>
+    Aprende como usar <a href="/using-packages/">paquetes</a>, o
+    escribir <a href="/platform-channels/">canales de plataforma</a>,
+    para acceder a código nativo, APIs y SDKs.
+    </p>
+
+</section>
+
+<section class="homepage__features card">
+    <h1>Desarrollo unificado de aplicaciones</h1>
+
+    <p>
+    Flutter tiene las herramientas y librerías para ayudarte 
+    a que tus ideas cobren vida en iOS y Android.
+    Si no tienes ninguna experiencia en desarrollo para móviles, Flutter
+    es un camino fácil y rápido para construir hermosas aplicaciones móviles.
+    Si eres un desarrollador experimentado en iOS o Android
+    puedes usar Flutter para tus vistas y aprovechar su conocimiento existente en Java/Kotlin/ObjC/Swift.
+    </p>
+
+    <div class="feature-lists">
+
+        <div class="feature-list-group">
+            <h3>Construye</h3>
+
+            <h4>Hermosas Interfaces de aplicación</h4>
+
+                <ul>
+                    <li>Rica API 2D acelerada por GPU</li>
+                    <li>Framework reactivo</li>
+                    <li>APIs de Animaciones/movimiento APIs</li>
+                    <li>Material Components y widgets para Cupertino</li>
+                </ul>
+
+            <h4>Experiencia fluida de cógigo</h4>
+
+            <ul>
+                <li>Inferior a un segundo, hot reload manteniendo el estado</li>
+                <li>Refactorización, autocompletado, etc.</li>
+                <li>Uso de Dart como lenguaje y en las librerías del core</li>
+                <li>Gestor de paquetes</li>
+            </ul>
+
+            <h4>Aplicaciones con funcionalidad completa</h4>
+
+            <ul>
+                <li>Interoperatividad con las APIs &amp; SDKs de OS </li>
+                <li>Gradle: Java/Kotlin</li>
+                <li>Cocoapods: ObjC/Swift</li>
+            </ul>
+        </div>
+
+        <div class="feature-list-group">
+            <h3>Optimizado</h3>
+
+            <h4>Test</h4>
+
+            <ul>
+                <li>Unit testing</li>
+                <li>Integration testing</li>
+                <li>On-device testing</li>
+            </ul>
+
+            <h4>Debug</h4>
+
+            <ul>
+                <li>IDE debugger</li>
+                <li>Web-based debugger</li>
+                <li>async/await</li>
+                <li>Evaluador de expresiones</li>
+            </ul>
+
+            <h4>Profile</h4>
+
+            <ul>
+                <li>Timeline</li>
+                <li>CPU y memoria</li>
+                <li>In-app perf charts</li>
+            </ul>
+        </div>
+
+        <div class="feature-list-group">
+            <h3>Deploy</h3>
+
+            <h4>Compilado</h4>
+
+            <ul>
+                <li>Código nativo ARM</li>
+                <li>"Tree shaking" compiler</li>
+            </ul>
+
+            <h4>Distribución</h4>
+
+            <ul>
+                <li>Apple App Store</li>
+                <li>Google Play Store</li>
+            </ul>
+        </div>
+
+    </div>
+
+    <p>
+    Aprende más sobre que hace especial a Flutter en esta
+    <a href="/technical-overview/">descripción técnica general</a>.
+    </p>
+</section>
+
+<section class="homepage__try_flutter card">
+
+    <div class="homepage__try_today">Prueba Flutter hoy. Empezar es fácil.</div>
+
+    <div class="homepage__button_row">
+    <a href="/get-started/install/" class="get-started-button">EMPEZAR</a>
+    </div>
+
+</section>
\ No newline at end of file
diff --git a/es_ES/layout.md b/es_ES/layout.md
new file mode 100644
index 0000000000..a0b47752a5
--- /dev/null
+++ b/es_ES/layout.md
@@ -0,0 +1,68 @@
+---
+layout: page
+title: Tratando con las restricciones de cajas en Flutter
+
+permalink: /layout/
+---
+
+Usted puede ser redirigido a esta página si el framework detecta un problema que involucre restricciones de cajas.
+
+
+* Placeholder for TOC
+{:toc}
+
+## Introducción
+
+En Flutter, los widgets son renderizados por sus objetos [`RenderBox`](https://docs.flutter.io/flutter/rendering/RenderBox-class.html) subyacentes. Los Render Boxes obtienen restricciones por parte de sus padres y se clasifican dentro de esas restricciones. 
+Las restricciones consisten en valores mínimos y maximos para el ancho y alto; los tamaños consisten en un ancho y alto específicos.
+
+En general, hay tres tipos de cajas, en términos de cómo manejar
+sus restricciones:
+
+- Aquellos que tratan de ser los más grandes posible.
+  Por ejemplo, las cajas usadas por [`Center`](https://docs.flutter.io/flutter/widgets/Center-class.html) y [`ListView`](https://docs.flutter.io/flutter/widgets/ListView-class.html).
+- Aquellos que tratan de tener el mismo tamaño que su hijo.
+  Por ejemplo, las cajas usadas por [`Transform`](https://docs.flutter.io/flutter/widgets/Transform-class.html) y [`Opacity`](https://docs.flutter.io/flutter/widgets/Opacity-class.html).
+- Aquellos que tratan de tener un tamaño en particular.
+  Por ejemplo, las cajas usadas por [`Image`](https://docs.flutter.io/flutter/dart-ui/Image-class.html) y [`Text`](https://docs.flutter.io/flutter/widgets/Text-class.html).
+
+Algunos widgets, por ejemplo [`Container`](https://docs.flutter.io/flutter/widgets/Container-class.html), varian de tipo en tipo basados en sus argumentos de construcción. En el caso de [`Container`](https://docs.flutter.io/flutter/widgets/Container-class.html), este por defecto trata de ser tan grande como sea posible, pero si tu colocas un valor en `width`, para esa instancia, trata de ajustarse a ese valor y tomar un tamaño particular.
+
+Otras, por ejemplo [`Row`](https://docs.flutter.io/flutter/widgets/Row-class.html) y [`Column`](https://docs.flutter.io/flutter/widgets/Column-class.html) (cajas flexibles) varían basándose en las restricciones que se les otorgue, como se describe a continuación en la sección "Flex".
+
+Las restricciones a veces son "estrictas", lo que significa que no dejan espacio para que el Render Box decida un tamaño
+(e.g. si el mínimo y máximo  de ancho son el mismo, se dice que tienen un ancho estricto). El ejemplo principal de esto es el widget`App`, el cual es contenido por la clase
+[`RenderView`](https://docs.flutter.io/flutter/rendering/RenderView-class.html): la caja usada por el hijo retornado por la función [`build`](https://docs.flutter.io/flutter/widgets/State/build.html) de la aplicación, le da una restricción que lo fuerza a rellenar exactamente el área de contención de la aplicación ( normalmente, toda la pantalla). Muchas de las cajas en Flutter, especialmente aquellas que tienen un único hijo, van a pasar sus restricciones a sus hijos. Eso significa que si anida un grupo de cajas dentro de otra en la raíz del árbol de renderizado de tu aplicación, todas encajarán exactamente entre sí, forzadas por las restricciones estrictas.
+
+Algunas cajas _pierden_ las restricciones, significa que el valor máximo es mantenido pero que el mínimo es removido. Por ejemplo, [`Center`](https://docs.flutter.io/flutter/widgets/Center-class.html).
+
+Restricciones Ilimitadas
+------------------------
+
+En ciertas situaciones, las restricciones dadas por la caja pueden ser _ilimitadas_, o infinitas. Estos significa que el valor máximo de ancho o el máximo de alto es colocado a `double.INFINITY`.
+
+
+Una caja que trata de ser tan grande como pueda, no tendrá una función útil cuando se le dan restricciones ilimitadas, y en modo chequeado, esa combinación va a lanzar una excepción que apunta a ese archivo.
+
+Los casos más comunes en los que se encuentra una Render Box con restricciones ilimitadas están dentro de las cajas flexibles ([`Row`](https://docs.flutter.io/flutter/widgets/Row-class.html)
+y [`Column`](https://docs.flutter.io/flutter/widgets/Column-class.html)), 
+y **dentro de regiones scrollables** 
+([`ListView`](https://docs.flutter.io/flutter/widgets/ListView-class.html) 
+y otras subclases de [`ScrollView`](https://docs.flutter.io/flutter/widgets/ScrollView-class.html)).
+
+En particular, [`ListView`](https://docs.flutter.io/flutter/widgets/ListView-class.html)
+trata de expandirse para tratar de encajar en el espacio disponible en su dirección transversal (i.e. Si es un bloque de scroll vertical, tratara de ser tan ancho como su padre). Si anida un
+[`ListView`](https://docs.flutter.io/flutter/widgets/ListView-class.html) con scroll vertical dentro de un [`ListView`](https://docs.flutter.io/flutter/widgets/ListView-class.html) con scroll horizontal el interno tratara de ser tan ancho como sea posible, el cual es infinitamente ancho, puesto que el externo es scrollable en esa dirección.
+
+Flex
+---------
+
+Las cajas flexibles en si mismas ([`Row`](https://docs.flutter.io/flutter/widgets/Row-class.html) 
+y [`Column`](https://docs.flutter.io/flutter/widgets/Column-class.html)) se comportan de forma diferente en función de si tienen restricciones limitadas o restricciones ilimitadas en su dirección dada.
+
+En restricciones limitadas, tratan de ser lo más grande posible en esa dirección.
+
+En las restricciones ilimitadas, tratan de adaptarse a sus hijos en esa dirección. En ese caso, tú no puedes colocar valor en `flex` en los hijos o en ningún otro que no sea 0 (el valor por defecto). En la librería de widget, esto significa que no puedes usar [`Expanded`](https://docs.flutter.io/flutter/widgets/Expanded-class.html)
+cuando una caja flexible está dentro de otra caja flexible o dentro de una scrollable. Si lo haces, Obtendrás un mensaje de excepción apuntando a ese documento.
+
+En la dirección _transversal_, es decir, en el ancho para [`Column`](https://docs.flutter.io/flutter/widgets/Column-class.html) (vertical flex) y en la altura para [`Row`](https://docs.flutter.io/flutter/widgets/Row-class.html) (horizontal flex), nunca deben ser ilimitadas, de lo contrario no serían capaces de alinear razonablemente a sus hijos.
diff --git a/es_ES/widgets-intro.md b/es_ES/widgets-intro.md
new file mode 100644
index 0000000000..b05cc7a69f
--- /dev/null
+++ b/es_ES/widgets-intro.md
@@ -0,0 +1,529 @@
+---
+layout: page
+title: Un recorrido por el framework de los widgets Flutter
+permalink: /widgets-intro/
+---
+
+* TOC Placeholder
+{:toc}
+
+## Introducción
+
+Los widgets de Flutter están construidos utilizando un framework moderno de estilo reactivo, que se inspira en React. La idea central es que construya su interfaz de usuario con widgets. Los widgets describen cómo debería ser su vista dada su configuración y estado actual. Cuando el estado de un widget cambia, el widget reconstruye su descripción, que el framework difiere de la descripción anterior para determinar los cambios mínimos necesarios en el árbol de render subyacente para la transición de un estado al siguiente.
+
+<aside id="note" class="alert alert-info" markdown="1">
+**Nota**: Si quieres conocer mejor Flutter zambulléndote en algún código, echa un vistazo a [Construyendo Layouts in Flutter](/tutorials/layout/) y
+[Agregando interactividad a tu Flutter App](/tutorials/interactive/).
+</aside>
+
+Hola Mundo
+-----------
+
+La aplicación Flutter mínima simplemente llama a la función [`runApp`](https://docs.flutter.io/flutter/widgets/runApp.html) con un widget:
+
+```dart
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(
+    Center(
+      child: Text(
+        'Hello, world!',
+        textDirection: TextDirection.ltr,
+      ),
+    ),
+  );
+}
+```
+
+La función [`runApp`](https://docs.flutter.io/flutter/widgets/runApp.html) toma el [`Widget`](https://docs.flutter.io/flutter/widgets/Widget-class.html) dado y lo convierte en la raíz del árbol de widgets. En este ejemplo, el árbol de widgets consta de dos widgets, el widget [`Center`](https://docs.flutter.io/flutter/widgets/Center-class.html) y su hijo (child), el widget [`Text`](https://docs.flutter.io/flutter/widgets/Text-class.html). El framework fuerza al widget raíz a cubrir la pantalla, lo que significa que el texto "Hello, world" termina centrado en la pantalla. En este caso, es necesario especificar la dirección del texto; cuando se utiliza el widget de MaterialApp, esto se hace por usted, como se demostrará más adelante.
+
+Al escribir una aplicación, normalmente creará nuevos widgets que son subclases de [`StatelessWidget`](https://docs.flutter.io/flutter/widgets/StatelessWidget-class.html) o [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html), dependiendo de si su widget gestiona algún estado. El trabajo principal de un widget es implementar una función [`build`](https://docs.flutter.io/flutter/widgets/StatelessWidget/build.html), que describe el widget en términos de otros widgets de nivel inferior. El framework construye esos widgets a su vez hasta que el proceso toca fondo en widgets que representan el [`RenderObject`](https://docs.flutter.io/flutter/rendering/RenderObject-class.html) subyacente, que calcula y describe la geometría del widget.
+
+Widgets básicos
+-------------
+
+_Artículo principal: [Descripción general de los widgets - Modelos de diseño](https://flutter.io/widgets/layout)_
+
+Flutter viene con un conjunto de potentes widgets básicos, de los cuales los siguientes son de uso muy común:
+
+ * [`Text`](https://docs.flutter.io/flutter/widgets/Text-class.html): El widget [`Text`](https://docs.flutter.io/flutter/widgets/Text-class.html) le permite crear una ejecución de texto con estilo dentro de su aplicación.
+
+* [`Row`](https://docs.flutter.io/flutter/widgets/Row-class.html), [`Column`](https://docs.flutter.io/flutter/widgets/Column-class.html): Estos widgets flexibles le permiten crear diseños flexibles tanto en la dirección horizontal ([`Row`](https://docs.flutter.io/flutter/widgets/Row-class.html)) como en la vertical ([`Column`](https://docs.flutter.io/flutter/widgets/Column-class.html)). Su diseño se basa en el modelo de diseño flexbox de la web.
+
+* [`Stack`](https://docs.flutter.io/flutter/widgets/Stack-class.html): En lugar de estar orientado linealmente (ya sea horizontal o verticalmente), un widget * [`Stack`](https://docs.flutter.io/flutter/widgets/Stack-class.html) le permite apilar widgets uno encima del otro en orden de pintura. A continuación, puedes usar el widget [`Positioned`](https://docs.flutter.io/flutter/widgets/Positioned-class.html) en los hijos de un [`Stack`](https://docs.flutter.io/flutter/widgets/Stack-class.html) para colocarlos en relación con el borde superior, derecho, inferior o izquierdo del Stack. Los Stacks se basan en el modelo de diseño de posicionamiento absoluto de la web.
+
+* [`Container`](https://docs.flutter.io/flutter/widgets/Container-class.html): El widget [`Container`](https://docs.flutter.io/flutter/widgets/Container-class.html) le permite crear elementos visuales rectangulares. Un contenedor puede ser decorado con un [`BoxDecoration`](https://docs.flutter.io/flutter/painting/BoxDecoration-class.html), como un fondo, un borde o una sombra. Un [`Container`](https://docs.flutter.io/flutter/widgets/Container-class.html) también puede tener márgenes, paddings y restricciones aplicadas a su tamaño. Además, un [`Container`](https://docs.flutter.io/flutter/widgets/Container-class.html) puede ser transformado en un espacio tridimensional utilizando una matriz.
+
+A continuación se muestran algunos widgets simples que combinan estos y otros widgets:
+
+```dart
+import 'package:flutter/material.dart';
+
+class MyAppBar extends StatelessWidget {
+  MyAppBar({this.title});
+
+  // Fields in a Widget subclass are always marked "final".
+
+  final Widget title;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 56.0, // in logical pixels
+      padding: const EdgeInsets.symmetric(horizontal: 8.0),
+      decoration: BoxDecoration(color: Colors.blue[500]),
+      // Row is a horizontal, linear layout.
+      child: Row(
+        // <Widget> is the type of items in the list.
+        children: <Widget>[
+          IconButton(
+            icon: Icon(Icons.menu),
+            tooltip: 'Navigation menu',
+            onPressed: null, // null disables the button
+          ),
+          // Expanded expands its child to fill the available space.
+          Expanded(
+            child: title,
+          ),
+          IconButton(
+            icon: Icon(Icons.search),
+            tooltip: 'Search',
+            onPressed: null,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class MyScaffold extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // Material is a conceptual piece of paper on which the UI appears.
+    return Material(
+      // Column is a vertical, linear layout.
+      child: Column(
+        children: <Widget>[
+          MyAppBar(
+            title: Text(
+              'Example title',
+              style: Theme.of(context).primaryTextTheme.title,
+            ),
+          ),
+          Expanded(
+            child: Center(
+              child: Text('Hello, world!'),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(
+    title: 'My app', // used by the OS task switcher
+    home: MyScaffold(),
+  ));
+}
+```
+
+Asegúrese de tener `uses-material-design: true` en la sección `flutter` de su archivo `pubspec.yaml`. Permite utilizar el conjunto predefinido de [Material icons](https://design.google.com/icons/).
+
+```yaml
+name: my_app
+flutter:
+  uses-material-design: true
+```
+
+Es necesario que haya muchos widgets dentro de [`MaterialApp`](https://docs.flutter.io/flutter/material/MaterialApp-class.html) para que se muestren correctamente, a fin de heredar los datos del tema. Por lo tanto, ejecutamos la aplicación con [`MaterialApp`](https://docs.flutter.io/flutter/material/MaterialApp-class.html).
+
+El widget `MyAppBar` crea un [`Container`](https://docs.flutter.io/flutter/widgets/Container-class.html) con una altura de 56 píxeles independientes del dispositivo con un relleno interno de 8 píxeles, tanto a la izquierda como a la derecha. Dentro del contenedor, `MyAppBar` usa un diseño de [`Row`](https://docs.flutter.io/flutter/widgets/Row-class.html) para organizar a sus hijos. El hijo del medio, el widget de título, está marcado como [`Expanded`](https://docs.flutter.io/flutter/widgets/Expanded-class.html), lo que significa que se expande para llenar cualquier espacio disponible que no haya sido consumido por los otros hijos. Puede tener varios hijos [`Expanded`](https://docs.flutter.io/flutter/widgets/Expanded-class.html) y determinar la proporción en la que consumen el espacio disponible usando el argumento [`flex`](https://docs.flutter.io/flutter/widgets/Expanded-class.html#flex) para [`Expanded`](https://docs.flutter.io/flutter/widgets/Expanded-class.html).
+
+El widget`MyScaffold` organiza a sus hijos en una columna vertical. En la parte superior de la columna coloca una instancia de `MyAppBar`, pasando a la app bar un widget [`Text`](https://docs.flutter.io/flutter/widgets/Text-class.html) para usar como título. Pasar widgets como argumentos a otros widgets es una técnica poderosa que le permite crear widgets genéricos que pueden ser reutilizados en una amplia variedad de formas. Finalmente, `MyScaffold` utiliza un [`Expanded`](https://docs.flutter.io/flutter/widgets/Expanded-class.html) para llenar el espacio restante con su cuerpo, que consiste en un mensaje centrado.
+
+Utilización de Material Components
+---------------------
+
+_Artículo principal: [Resumen de widgets: Material Components](https://flutter.io/widgets/material)_
+
+Flutter proporciona una serie de widgets que te ayudan a crear aplicaciones que siguen a Material Design. Una aplicación MaterialApp comienza con el widget [`MaterialApp`](https://docs.flutter.io/flutter/material/MaterialApp-class.html), que crea una serie de widgets útiles en la raíz de su aplicación, incluyendo un [`Navigator`](https://docs.flutter.io/flutter/widgets/Navigator-class.html), que gestiona una pila de widgets identificados por cadenas, también conocidas como "routes". El [`Navigator`](https://docs.flutter.io/flutter/widgets/Navigator-class.html) le permite realizar una transición fluida entre las pantallas de su aplicación. El uso del widget de [`MaterialApp`](https://docs.flutter.io/flutter/material/MaterialApp-class.html) es totalmente opcional, pero es una buena práctica.
+
+```dart
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MaterialApp(
+    title: 'Flutter Tutorial',
+    home: TutorialHome(),
+  ));
+}
+
+class TutorialHome extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // Scaffold is a layout for the major Material Components.
+    return Scaffold(
+      appBar: AppBar(
+        leading: IconButton(
+          icon: Icon(Icons.menu),
+          tooltip: 'Navigation menu',
+          onPressed: null,
+        ),
+        title: Text('Example title'),
+        actions: <Widget>[
+          IconButton(
+            icon: Icon(Icons.search),
+            tooltip: 'Search',
+            onPressed: null,
+          ),
+        ],
+      ),
+      // body is the majority of the screen.
+      body: Center(
+        child: Text('Hello, world!'),
+      ),
+      floatingActionButton: FloatingActionButton(
+        tooltip: 'Add', // used by assistive technologies
+        child: Icon(Icons.add),
+        onPressed: null,
+      ),
+    );
+  }
+}
+```
+
+Ahora que hemos cambiado de  `MyAppBar` y `MyScaffold` a los widgets [`AppBar`](https://docs.flutter.io/flutter/material/AppBar-class.html) y [`Scaffold`](https://docs.flutter.io/flutter/material/Scaffold-class.html) de `material.dart`, nuestra aplicación está empezando a buscar un poco más de Material. Por ejemplo, la barra de aplicaciones tiene una sombra y el texto del título hereda automáticamente el estilo correcto. También hemos añadido un botón de acción flotante para una buena medida.
+
+Note que estamos pasando de nuevo los widgets como argumentos a otros widgets. El widget [`Scaffold`](https://docs.flutter.io/flutter/material/Scaffold-class.html) toma un número de diferentes widgets como argumentos con nombre, cada uno de los cuales se coloca en la disposición de Scaffold en el lugar apropiado. Del mismo modo, el widget de [`AppBar`](https://docs.flutter.io/flutter/material/AppBar-class.html) nos permite pasar widgets para el [`leading`](https://docs.flutter.io/flutter/material/AppBar-class.html#leading) y las [`actions`](https://docs.flutter.io/flutter/material/AppBar-class.html#actions) del widget de [`title`](https://docs.flutter.io/flutter/material/AppBar-class.html#title). Este patrón se repite a lo largo del framework y es algo que usted podría considerar al diseñar sus propios widgets.
+
+Manejar gestos
+-----------------
+
+_Artículo principal: [Gestos en Flutter](https://flutter.io/gestures/)_
+
+La mayoría de las aplicaciones incluyen alguna forma de interacción del usuario con el sistema. El primer paso para construir una aplicación interactiva es detectar gestos de entrada. Veamos cómo funciona creando un simple botón:
+
+```dart
+class MyButton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        print('MyButton was tapped!');
+      },
+      child: Container(
+        height: 36.0,
+        padding: const EdgeInsets.all(8.0),
+        margin: const EdgeInsets.symmetric(horizontal: 8.0),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(5.0),
+          color: Colors.lightGreen[500],
+        ),
+        child: Center(
+          child: Text('Engage'),
+        ),
+      ),
+    );
+  }
+}
+```
+
+El widget [`GestureDetector`](https://docs.flutter.io/flutter/widgets/GestureDetector-class.html) no tiene una representación visual sino que detecta los gestos realizados por el usuario. Cuando el usuario toca el [`Container`](https://docs.flutter.io/flutter/widgets/Container-class.html), el [`GestureDetector`](https://docs.flutter.io/flutter/widgets/GestureDetector-class.html) llama a su llamada [`onTap`](https://docs.flutter.io/flutter/widgets/GestureDetector-class.html#onTap), en este caso imprimiendo un mensaje a la consola. Puede utilizar [`GestureDetector`](https://docs.flutter.io/flutter/widgets/GestureDetector-class.html) para detectar una variedad de gestos de entrada, incluidos toques (taps), arrastres (drags) y escalas (scales).
+
+Muchos widgets utilizan un [`GestureDetector`](https://docs.flutter.io/flutter/widgets/GestureDetector-class.html) para proporcionar llamadas de retorno (callbacks) opcionales para otros widgets. Por ejemplo, los widgets [`IconButton`](https://docs.flutter.io/flutter/material/IconButton-class.html),
+[`RaisedButton`](https://docs.flutter.io/flutter/material/RaisedButton-class.html) y [`FloatingActionButton`](https://docs.flutter.io/flutter/material/FloatingActionButton-class.html) tienen [`onPressed`](https://docs.flutter.io/flutter/material/RaisedButton-class.html#onPressed) callbacks que se activan cuando el usuario toca el widget.
+
+Cambiar los widgets en respuesta a las entradas
+-------------------------------------
+_Artículos principales: [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html), [`State.setState`](https://docs.flutter.io/flutter/widgets/State/setState.html)_
+
+Hasta ahora, sólo hemos usado widgets sin estado. Los widgets sin estado reciben argumentos de su widget padre, que almacenan en variables de miembro [`final`](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#final-and-const). Cuando se le pide [`build`](https://docs.flutter.io/flutter/widgets/StatelessWidget/build.html)a un widget, utiliza estos valores almacenados para derivar nuevos argumentos para los widgets que crea.
+
+Para construir experiencias más complejas -por ejemplo, para reaccionar de forma más interesante a las entradas de los usuarios- las aplicaciones suelen tener algún estado. Flutter utiliza StatefulWidgets para capturar esta idea. StatefulWidgets son widgets especiales que saben cómo generar objetos State, que luego se utilizan para mantener el estado. Considere este ejemplo básico, usando el [`RaisedButton`](https://docs.flutter.io/flutter/material/RaisedButton-class.html) mencionado anteriormente:
+
+```dart
+class Counter extends StatefulWidget {
+  // This class is the configuration for the state. It holds the
+  // values (in this nothing) provided by the parent and used by the build
+  // method of the State. Fields in a Widget subclass are always marked "final".
+
+  @override
+  _CounterState createState() => _CounterState();
+}
+
+class _CounterState extends State<Counter> {
+  int _counter = 0;
+
+  void _increment() {
+    setState(() {
+      // This call to setState tells the Flutter framework that
+      // something has changed in this State, which causes it to rerun
+      // the build method below so that the display can reflect the
+      // updated values. If we changed _counter without calling
+      // setState(), then the build method would not be called again,
+      // and so nothing would appear to happen.
+      _counter++;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // This method is rerun every time setState is called, for instance
+    // as done by the _increment method above.
+    // The Flutter framework has been optimized to make rerunning
+    // build methods fast, so that you can just rebuild anything that
+    // needs updating rather than having to individually change
+    // instances of widgets.
+    return Row(
+      children: <Widget>[
+        RaisedButton(
+          onPressed: _increment,
+          child: Text('Increment'),
+        ),
+        Text('Count: $_counter'),
+      ],
+    );
+  }
+}
+```
+
+Puede que se pregunte por qué StatefulWidget y State son objetos separados. En Flutter, estos dos tipos de objetos tienen diferentes ciclos de vida. Los widgets son objetos temporales, utilizados para construir una presentación de la aplicación en su estado actual. Por otro lado, los objetos de estado son persistentes entre llamadas a [`build()`](https://docs.flutter.io/flutter/widgets/State/build.html), permitiéndoles recordar información.
+
+El ejemplo anterior acepta la entrada del usuario y utiliza directamente el resultado en su método de compilación. En aplicaciones más complejas, diferentes partes de la jerarquía de widgets pueden ser responsables de diferentes preocupaciones; por ejemplo, un widget puede presentar una interfaz de usuario compleja con el objetivo de recopilar información específica, como una fecha o ubicación, mientras que otro widget puede utilizar esa información para cambiar la presentación general.
+
+En Flutter, las notificaciones de cambio fluyen "hacia arriba" en la jerarquía de widgets por medio de llamadas de callbacks, mientras que el estado actual fluye "hacia abajo" a los widgets sin estado que hacen la presentación. El padre común que redirige este flujo es el State. Veamos cómo funciona en la práctica, con este ejemplo un poco más complejo:
+
+```dart
+class CounterDisplay extends StatelessWidget {
+  CounterDisplay({this.count});
+
+  final int count;
+
+  @override
+  Widget build(BuildContext context) {
+    return Text('Count: $count');
+  }
+}
+
+class CounterIncrementor extends StatelessWidget {
+  CounterIncrementor({this.onPressed});
+
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return RaisedButton(
+      onPressed: onPressed,
+      child: Text('Increment'),
+    );
+  }
+}
+
+class Counter extends StatefulWidget {
+  @override
+  _CounterState createState() => _CounterState();
+}
+
+class _CounterState extends State<Counter> {
+  int _counter = 0;
+
+  void _increment() {
+    setState(() {
+      ++_counter;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(children: <Widget>[
+      CounterIncrementor(onPressed: _increment),
+      CounterDisplay(count: _counter),
+    ]);
+  }
+}
+```
+
+Nótese cómo creamos dos nuevos widgets sin estado, separando limpiamente las preocupaciones de mostrar el contador (CounterDisplay) y cambiar el contador (CounterIncrementor). Aunque el resultado neto es el mismo que en el ejemplo anterior, la separación de responsabilidades permite encapsular una mayor complejidad en los widgets individuales, manteniendo al mismo tiempo la simplicidad en el padre.
+
+Unirlo todo
+-----------
+
+Consideremos un ejemplo más completo que reúne los conceptos presentados anteriormente. Trabajaremos con una hipotética aplicación de compras, que muestra varios productos ofrecidos a la venta y mantiene un carrito de compras para las compras previstas. Comencemos por definir nuestra clase de presentación, `ShoppingListItem`:
+
+```dart
+class Product {
+  const Product({this.name});
+  final String name;
+}
+
+typedef void CartChangedCallback(Product product, bool inCart);
+
+class ShoppingListItem extends StatelessWidget {
+  ShoppingListItem({Product product, this.inCart, this.onCartChanged})
+      : product = product,
+        super(key: ObjectKey(product));
+
+  final Product product;
+  final bool inCart;
+  final CartChangedCallback onCartChanged;
+
+  Color _getColor(BuildContext context) {
+    // The theme depends on the BuildContext because different parts of the tree
+    // can have different themes.  The BuildContext indicates where the build is
+    // taking place and therefore which theme to use.
+
+    return inCart ? Colors.black54 : Theme.of(context).primaryColor;
+  }
+
+  TextStyle _getTextStyle(BuildContext context) {
+    if (!inCart) return null;
+
+    return TextStyle(
+      color: Colors.black54,
+      decoration: TextDecoration.lineThrough,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      onTap: () {
+        onCartChanged(product, !inCart);
+      },
+      leading: CircleAvatar(
+        backgroundColor: _getColor(context),
+        child: Text(product.name[0]),
+      ),
+      title: Text(product.name, style: _getTextStyle(context)),
+    );
+  }
+}
+```
+
+
+El widget `ShoppingListItem` sigue un patrón común para los widgets stateless. Almacena los valores que recibe en su constructor en variables de miembro [`final`](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#final-and-const), que luego utiliza durante su función [`build`](https://docs.flutter.io/flutter/widgets/StatelessWidget/build.html). Por ejemplo, el booleano `inCart` para alternar entre dos apariencias visuales: una que usa el color primario del tema actual y otra que usa gris.
+
+Cuando el usuario pulsa sobre el elemento de la lista, el widget no modifica su valor `inCart` directamente. En su lugar, el widget llama a la función `onCartChanged` que recibió de su widget padre. Este patrón le permite almacenar estados más arriba en la jerarquía de widgets, lo que hace que el estado persista durante períodos de tiempo más largos. En el extremo, el estado almacenado en el widget pasado a [`runApp`](https://docs.flutter.io/flutter/widgets/runApp.html) persiste durante toda la vida útil de la aplicación.
+
+Cuando el padre recibe la llamada de retorno `onCartChanged`, el padre actualiza su estado interno, lo que provoca que el padre reconstruya y cree una nueva instancia de `ShoppingListItem` con el nuevo valor `inCart`. Aunque el padre crea una nueva instancia de `ShoppingListItem` cuando reconstruye, esa operación es barata porque el framework compara los widgets recién construidos con los widgets previamente construidos y aplica sólo las diferencias al [`RenderObject`](https://docs.flutter.io/flutter/rendering/RenderObject-class.html) subyacente.
+
+Veamos un ejemplo de un widget padre que almacena estado mutable:
+
+<!--
+class Product {
+  const Product({this.name});
+  final String name;
+}
+
+class ShoppingListItem extends StatelessWidget {
+  ShoppingListItem({Product product, bool inCart, Function onCartChanged});
+  @override
+  Widget build(BuildContext context) => null;
+}
+-->
+```dart
+class `ShoppingList` extends StatefulWidget {
+  `ShoppingList`({Key key, this.products}) : super(key: key);
+
+  final List<Product> products;
+
+  // The framework calls createState the first time a widget appears at a given
+  // location in the tree. If the parent rebuilds and uses the same type of
+  // widget (with the same key), the framework re-uses the State object
+  // instead of creating a new State object.
+
+  @override
+  `_ShoppingListState` createState() => `_ShoppingListState`();
+}
+
+class `_ShoppingListState` extends State<`ShoppingList`> {
+  Set<Product> _shoppingCart = Set<Product>();
+
+  void _handleCartChanged(Product product, bool inCart) {
+    setState(() {
+      // When a user changes what's in the cart, we need to change _shoppingCart
+      // inside a setState call to trigger a rebuild. The framework then calls
+      // build, below, which updates the visual appearance of the app.
+
+      if (inCart)
+        _shoppingCart.add(product);
+      else
+        _shoppingCart.remove(product);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Shopping List'),
+      ),
+      body: ListView(
+        padding: EdgeInsets.symmetric(vertical: 8.0),
+        children: widget.products.map((Product product) {
+          return ShoppingListItem(
+            product: product,
+            inCart: _shoppingCart.contains(product),
+            onCartChanged: _handleCartChanged,
+          );
+        }).toList(),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(MaterialApp(
+    title: 'Shopping App',
+    home: `ShoppingList`(
+      products: <Product>[
+        Product(name: 'Eggs'),
+        Product(name: 'Flour'),
+        Product(name: 'Chocolate chips'),
+      ],
+    ),
+  ));
+}
+```
+
+La clase `ShoppingList` extiende [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html), lo que significa que este widget almacena estado mutable. Cuando el widget `ShoppingList` se inserta por primera vez en el árbol, el framework llama a la función [`createState`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html#createState) para crear una nueva instancia de `_ShoppingListState` para asociarla con esa ubicación en el árbol (Note que típicamente nombramos subclases de [`State`](https://docs.flutter.io/flutter/widgets/State-class.html) con guiones bajos para indicar que son detalles de implementación privados). Cuando el padre de este widget se reconstruye, el padre crea una nueva instancia de `ShoppingList`, pero el framework reutiliza la instancia `_ShoppingListState` que ya está en el árbol en lugar de llamar [`createState`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html#createState) de nuevo.
+
+Para acceder a las propiedades de la Lista de la Compra actual, el `_ShoppingListState` puede usar su propiedad [`widget`](https://docs.flutter.io/flutter/widgets/State-class.html#widget). Si el padre reconstruye y crea una nueva `ShoppingList`, el `_ShoppingListState` reconstruye con el nuevo valor del [`widget`](https://docs.flutter.io/flutter/widgets/State-class.html#widget). Si desea que se le notifique cuando cambie la propiedad del widget, puede anular la función [`didUpdateWidget`](https://docs.flutter.io/flutter/widgets/State-class.html#didUpdateWidget), que se pasa a `oldWidget` para permitirle comparar el antiguo [`widget`](https://docs.flutter.io/flutter/widgets/State-class.html#widget) con el actual.
+
+Al manejar la devolución de llamada `onCartChanged`, el `_ShoppingListState` muta su estado interno añadiendo o quitando un producto de `_shoppingCart`. Para señalar al framework que cambia su estado interno, envuelve esas llamadas en una llamada [`setState`](https://docs.flutter.io/flutter/widgets/State-class.html#setState). Calling [`setState`](https://docs.flutter.io/flutter/widgets/State-class.html#setState) marca este widget como sucio y lo programa para ser reconstruido la próxima vez que su aplicación necesite actualizar la pantalla. Si olvida llamar a [`setState`](https://docs.flutter.io/flutter/widgets/State-class.html#setState) al modificar el estado interno de un widget, el framework no sabrá que su widget está sucio y puede que no llame a la función [`build`](https://docs.flutter.io/flutter/widgets/StatelessWidget/build.html) del widget, lo que significa que la interfaz de usuario puede que no se actualice para reflejar el estado cambiado.
+
+Gestionando el estado de esta manera, no es necesario escribir código separado para crear y actualizar widgets hijo. En su lugar, simplemente implemente la función de construcción, que maneja ambas situaciones.
+
+Responder a los eventos del ciclo de vida de los widgets
+--------------------------------------------------------
+_Artículo principal: [Estado](https://docs.flutter.io/flutter/widgets/State-class.html)_
+
+Después de llamar [`createState`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html#createState) en el StatefulWidget, el framework inserta el nuevo objeto state en el árbol y luego llama a [`initState`](https://docs.flutter.io/flutter/widgets/State-class.html#initState) en el objeto state. Una subclase de [`State`](https://docs.flutter.io/flutter/widgets/State-class.html) puede invalidar [`initState`](https://docs.flutter.io/flutter/widgets/State-class.html#initState) para hacer el trabajo que necesita suceder sólo una vez. Por ejemplo, puede anular [`initState`](https://docs.flutter.io/flutter/widgets/State-class.html#initState) para configurar animaciones o suscribirse a servicios de plataforma. Las implementaciones de [`initState`](https://docs.flutter.io/flutter/widgets/State-class.html#initState) se requieren para comenzar llamando a [`super.initState`](https://docs.flutter.io/flutter/widgets/State-class.html#initState).
+
+Cuando un objeto de estado ya no es necesario, el framework llama a [`dispose`](https://docs.flutter.io/flutter/widgets/State-class.html#dispose) sobre el objeto de estado. Puede anular la función de [`dispose`](https://docs.flutter.io/flutter/widgets/State-class.html#dispose) para realizar el trabajo de limpieza. Por ejemplo, puede anular [`dispose`](https://docs.flutter.io/flutter/widgets/State-class.html#dispose) para cancelar temporizadores o darse de baja de los servicios de la plataforma. Las implementaciones de [`dispose`](https://docs.flutter.io/flutter/widgets/State-class.html#dispose) típicamente terminan llamando [`super.dispose`](https://docs.flutter.io/flutter/widgets/State-class.html#dispose).
+
+Llaves (keys)
+-------------
+_Artículo principal: [Clave](https://docs.flutter.io/flutter/foundation/Key-class.html)
+
+Puede utilizar las claves para controlar qué widgets el framework coincide con otros widgets cuando un widget se reconstruye. De forma predeterminada, el framework coincide con los widgets de la compilación actual y anterior según su [`runtimeType`](https://docs.flutter.io/flutter/widgets/Widget-class.html#runtimeType) y el orden en el que aparecen. Con las claves, el framework requiere que los dos widgets tengan la misma [`key`](https://docs.flutter.io/flutter/widgets/Widget-class.html#key) así como el mismo [`runtimeType`](https://docs.flutter.io/flutter/widgets/Widget-class.html#runtimeType).
+
+Las claves son más útiles en los widgets que construyen muchas instancias del mismo tipo de widget. Por ejemplo, el widget `ShoppingList`, que construye sólo suficientes instancias de `ShoppingListItem` para llenar su región visible:
+
+* Sin las keys, la primera entrada de la compilación actual siempre se sincronizaría con la primera entrada de la compilación anterior, incluso si, semánticamente, la primera entrada de la lista se desplaza fuera de la pantalla y ya no es visible en la ventana de visualización.
+
+* Asignando a cada entrada de la lista una clave "semántica", la lista infinita puede ser más eficaz porque el framework sincroniza las entradas con las claves semánticas coincidentes y, por lo tanto, con apariencias visuales similares (o idénticas). Además, sincronizar las entradas semánticamente significa que el estado retenido en los widgets hijos de estado permanece unido a la misma entrada semántica en lugar de la entrada en la misma posición numérica en la ventana de visualización.
+
+Claves Globales
+---------------
+_Artículo principal: [GlobalKey](https://docs.flutter.io/flutter/widgets/GlobalKey-class.html)_
+
+Puede utilizar claves globales para identificar de forma única los widgets hijos. Las claves globales deben ser globalmente únicas en toda la jerarquía de widgets, a diferencia de las claves locales que sólo necesitan ser únicas entre hermanos. Dado que son únicos en el mundo, se puede utilizar una clave global para recuperar el estado asociado a un widget.
+
+
+
+
+
diff --git a/tool/travis.sh b/tool/travis.sh
index a47637a515..61114e2c89 100755
--- a/tool/travis.sh
+++ b/tool/travis.sh
@@ -76,11 +76,12 @@ bundle exec jekyll build
 echo "Validating all links."
 rake checklinks
 
+
 if [ "$TRAVIS_EVENT_TYPE" = "push" ] && [ "$TRAVIS_BRANCH" = "master" ]; then
   # Deploy pushes to master to Firebase hosting.
   echo "Deploying to Firebase."
   npm install --global firebase-tools@3.19.3
-  firebase -P sweltering-fire-2088 --token "$FIREBASE_TOKEN" --non-interactive deploy
+  firebase -P flutter-es --token "$FIREBASE_TOKEN" --non-interactive deploy
 fi