index.html

<!DOCTYPE html>
<html lang="en">
  <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>Flutter - 极速构建漂亮的本地应用 </title>
  <link rel="shortcut icon" href="/images/favicon.png">

  <meta name="description" content="">
  <meta name="keywords" content=" ">

  <link rel="stylesheet" href="/css/lavish-bootstrap.css">
  <link rel="stylesheet" href="/css/main.css">
  <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">
  
  <link rel="canonical" href="http://localhost:4000/">

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-67589403-1', 'auto');
    ga('send', 'pageview');
  </script>

  <meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4" />
</head>


  <body class="homepage">

    <div id="overlay-under-drawer"><!-- for the drawer on narrow screens --></div>

    <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="/">Flutter</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/">文档</a>
            <a class="page-link" href="/showcase/">案例</a>
            <a class="page-link" href="https://github.com/flutter/flutter">GitHub</a>
            <a class="page-link" href="https://pub.dartlang.org/flutter">库</a>
            <a class="page-link" href="/support/">支持</a>
            <a class="page-link" href="http://flutter-dev.cn">中文开发者论坛</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="搜索">
            </form>
          </div>
        </nav>
      </div>
    </div> <!-- /.row -->
  </div> <!-- /.container -->
</header>


    <!-- Page Content -->
    <div class="container-fluid contents">
      <!-- Content Row -->
      <div class="row">

        <!-- Sidebar Column -->
        <div id="side-nav-container" class="col-sm-3">
          <ul id="mysidebar" class="nav">

  <li class="sidebar-title">入门</li>

    <ul class="sidebar-items">
      <li><a href="/get-started/install/">1: 安装</a></li>
      <li><a href="/get-started/editor/">2: 配置编辑器</a></li>
      <li><a href="/get-started/test-drive/">3: Flutter 初体验</a></li>
      <li><a href="/get-started/codelab/">4: 编写第一个 Flutter 应用</a></li>
      <li><a href="/get-started/learn-more/">5: 学习更多</a></li>
    </ul>

  <li class="sidebar-title">构建 UI</li>

    <ul class="sidebar-items">
      <li><a href="/widgets-intro/">框架预览</a></li>
      <li><a href="/widgets/">Widget 目录</a></li>
      <li><a href="/cookbook/">小案例</a></li>
      <li><a href="/catalog/samples/">示例目录</a></li>
      <li><a href="/codelabs">Codelab</a></li>
      <li><a href="/tutorials/layout/">构建布局 - 教程</a></li>
      <li><a href="/tutorials/interactive/">添加交互 - 教程</a></li>
      <li><a href="/web-analogs/"> Web 开发者参考</a></li>
      <li><a href="/flutter-for-android/">Android 开发者参考</a></li>
      <li><a href="/flutter-for-ios/">iOS 开发者参考</a></li>
      <li><a href="/flutter-for-react-native/">React Native 开发者参考</a></li>
      <li><a href="/gestures/">手势</a></li>
      <li><a href="/animations/">动画</a></li>
      <li><a href="/layout/">框约束</a></li>
      <li><a href="/assets-and-images/">资源与图像</a></li>
      <li><a href="/tutorials/internationalization">国际化</a></li>
      <li><a href="/accessibility">无障碍</a></li>
    </ul>

  <li class="sidebar-title">使用设备与 SDK 中的 API</li>

    <ul class="sidebar-items">
      <li><a href="/using-packages/">使用扩展包</a></li>
      <li><a href="/developing-packages/">开发扩展包</a></li>
      <li><a href="/platform-channels/">平台特定代码</a></li>
      <li><a href="/json/">JSON 和序列化</a></li>
      
    </ul>

  <li class="sidebar-title">开发与工具</li>

    <ul class="sidebar-items">
      <li><a href="/using-ide/">Flutter IDE 的使用</a></li>
      <li><a href="/hot-reload/">热重载的使用</a></li>
      <li><a href="/testing/">应用测试</a></li>
      <li><a href="/debugging/">应用调试</a></li>
      <li><a href="/ui-performance/">性能分析</a></li>
      <li><a href="/inspector/">用户界面检查</a></li>
      <li><a href="/android-release/">编译正式版的 Android 应用</a></li>
      <li><a href="/ios-release/">编译正式版的 iOS 应用</a></li>
      <li><a href="/fastlane-cd/">使用 Fastlane 持续部署</a></li>
      <li><a href="/upgrading/">升级 Flutter</a></li>
      <li><a href="/formatting/"> 格式化代码</a></li>
    </ul>

  <li class="sidebar-title">更多细节</li>

    <ul class="sidebar-items">
      <li><a href="/faq/">FAQ</a></li>
      <li><a href="/technical-overview">技术一览</a></li>
      <li><a href="https://docs.google.com/presentation/d/1B3p0kP6NV_XMOimRV09Ms75ymIjU5gr6GGIX74Om_DE/edit?usp=sharing">神奇的 Flutter - 幻灯片</a></li>
      <li><a href="https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit?usp=sharing">架构图</a></li>
      <li><a href="https://www.bilibili.com/video/av14430321/">Flutter 框架层设计 <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
      <li><a href="https://www.bilibili.com/video/av6269773/">Flutter 的渲染管线 <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
    </ul>

</ul>

        </div>

        
        <!-- Homepage Content Column -->
        <div class="col-sm-12 main-contents">
          <div class="main-contents-body">
            <article class="post-content">
  
  
  <div class="homepage__illustration">
    <h1 class="homepage__illustration--text">
        <span>最新版本：</span>
        &nbsp;
        <a href="https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a?linkId=53249457">Flutter Release Preview 1</a>.
    </h1>
    <h1 class="homepage__illustration--text">
        <span>翻译此网站：</span>
        &nbsp;
        <a href="https://github.com/flutter-dev/website/tree/master/zh_CN">了解更多</a>.
    </h1>
    <img src="images/homepage/header-illustration.png" class="homepage__illustration--image" alt="Illustration with a mobile phone, a pencil, and an abstract drawing of widgets." />
</div>

<section class="homepage__key_points card">
    <h1 class="homepage__title">
        以极短的时间构建优雅的原生级应用
    </h1>

    <div class="homepage__tagline">
    Flutter 是谷歌的移动端 UI 框架，可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的.
    </div>

    <div class="homepage__button_row">
    <a href="/get-started/install/" class="get-started-button">开始</a>
    </div>

    <div class="key-points">

        <div class="homepage__key_point">
            <div class="homepage__key_point_title">快速开发</div>

            <p>
            程序的热重载可以在瞬间完成，让应用在生命周期内得到重绘。丰富且完全可定制的部件可以让你在几分钟内构建原生级界面。
            </p>
        </div>

        <div class="homepage__key_point">
            <div class="homepage__key_point_title">极具表现力和灵活性的 UI</div>

            <p>
            Flutter 能够快速发布专注于终端用户体验的功能。其分层架构允许完全自定义，从而实现快速渲染和极具表现力与灵活性的设计。
            </p>
        </div>

        <div class="homepage__key_point">
            <div class="homepage__key_point_title">本地化表现</div>

            <p>
            Flutter 的部件包含所有重要的平台差异，如滚动，导航，图标和字体，以在 iOS 和 Android 上提供完整的 UI 本地化表现。
            </p>
        </div>

    </div>
</section>

<section class="homepage__hot_reload card">
    <h1>快速开发</h1>

    <p>
        Flutter 的热重载 可帮助您快速轻松地试验，构建 UI，添加功能和快速地修复错误。在 iOS 和 Android 的模拟器与硬件上体验亚秒级重载的同时不会丢失状态。
    </p>

    <div class="hot-reload-gif-container">
        <img src="/images/intellij/hot-reload.gif" class="hot-reload-gif" alt="Make a change in your code, and your app is changed instantly." />
    </div>
</section>

<section class="homepage__beautiful_uis card ">
    <h1>极具表现力和美观 UI</h1>

    <p>
    使用 Flutter 内置的 Material Design 和 Cupertino（iOS 风格）的部件、丰富的手势 API、自然平滑的滑动和不同的平台表现来提升用户体验。
    </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>
    浏览 <a href="/widgets/">部件目录</a>.
    </p>
</section>

<section class="homepage__reactive_framework card">
    <h1>现代化响应式框架</h1>

    <p>
    使用Flutter的现代化响应式框架和丰富的平台、布局和基础组件来构建你的用户界面。使用功能强大且灵活的API（针对 2D，动画，手势，动效等）解决复杂的用户界面设计。
    </p>

<pre class="prettyprint highlighter-rouge highlight lang-dart language-dart"><code>class CounterState extends State&lt;Counter&gt; {
  int counter = 0;

  void increment() {
    // Tells the Flutter framework that state has changed,
    // so the framework can run build() and update the display.
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // This method is rerun every time setState is called.
    // 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 new Row(
      children: &lt;Widget&gt;[
        new RaisedButton(
          onPressed: increment,
          child: new Text(&#39;Increment&#39;),
        ),
        new Text(&#39;Count: $counter&#39;),
      ],
    );
  }
}</code></pre>

    <p>
    浏览 <a href="/widgets/">组件目录</a>
    来学习
    <a href="/widgets-intro/">响应式框架。</a>.
    </p>

</section>

<section class="homepage__interop card">
    <h1>使用平台原生功能及 SDK</h1>

    <p>
    通过平台 API，第三方 SDK 和原生代码让你的应用具有强大的扩展性。 Flutter 允许重复使用现有的 Java，Swift 和 ObjC代码，并访问 iOS 和 Android 上的原生功能和 SDK。
    </p>

    <p>
    访问平台的原生功能非常简单。 如以下是来自 <a href="https://github.com/flutter/flutter/tree/master/examples/platform_channel">平台交互 demo</a> 的代码片段：
    </p>

<pre class="prettyprint highlighter-rouge highlight lang-dart language-dart"><code>Future&lt;Null&gt; getBatteryLevel() async {
  var batteryLevel = &#39;unknown&#39;;
  try {
    int result = await methodChannel.invokeMethod(&#39;getBatteryLevel&#39;);
    batteryLevel = &#39;Battery level: $result%&#39;;
  } on PlatformException {
    batteryLevel = &#39;Failed to get battery level.&#39;;
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}</code></pre>

    <p>
    学习如何使用 <a href="/using-packages/">扩展库</a>, 或者编写
     <a href="/platform-channels/">平台通道</a>,
    来访问原生代码、API 和 SDK。
    </p>

</section>

<section class="homepage__features card">
    <h1>统一应用开发</h1>

    <p>
    Flutter 的工具和库可以帮助你轻松地将自己的想法带到 iOS 和 Android 设备上。如果你没有任何移动开发经验，用 Flutter 来构建漂亮的移动应用是你不错的选择。如果你是一位经验丰富的 iOS 或 Android 开发人员，则可以使用 Flutter 作为你应用的用户界面开发工具，并充分利用现有的大部分Java、ObjC 或 Swift 代码。
    </p>

    <div class="feature-lists">

        <div class="feature-list-group">
            <h3>应用构建</h3>

            <h4>漂亮的用户界面</h4>

                <ul>
                    <li>丰富的2D 硬件加速API</li>
                    <li>响应式框架</li>
                    <li>动画和运动 API</li>
                    <li>Material 风格和 Cupertino 风格的部件</li>
                </ul>

            <h4>流畅的编程体验</h4>

            <ul>
                <li>亚秒级、保留状态的热重载</li>
                <li>IntelliJ 的 refactor、代码补齐等功能</li>
                <li>Dart 语言及其核心库</li>
                <li>依赖库管理</li>
            </ul>

            <h4>构建功能齐全的应用</h4>

            <ul>
                <li>调用平台的 API 和 SDK</li>
                <li>Maven/Java</li>
                <li>Cocoapods/ObjC/Swift</li>
            </ul>
        </div>

        <div class="feature-list-group">
            <h3>应用优化</h3>

            <h4>测试</h4>

            <ul>
                <li>单元测试</li>
                <li>集成测试</li>
                <li>设备端实时测试</li>
            </ul>

            <h4>调试</h4>

            <ul>
                <li>IDE 调试器</li>
                <li>基于 Web 的调试器</li>
                <li>async/await 的可感知</li>
                <li>实时表达式值显示</li>
            </ul>

            <h4>分析</h4>

            <ul>
                <li>时间线</li>
                <li>CPU 和 内存</li>
                <li>应用内视图</li>
            </ul>
        </div>

        <div class="feature-list-group">
            <h3>部署</h3>

            <h4>编译</h4>

            <ul>
                <li>本地 ARM 机器码</li>
                <li>消除冗余代码</li>
            </ul>

            <h4>分发</h4>

            <ul>
                <li>App Store</li>
                <li>Play Store</li>
            </ul>
        </div>

    </div>

    <p>
    通过学习 <a href="/technical-overview/">技术概览</a> 来了解 Flutter 为什么如此特殊。
    </p>
</section>

<section class="homepage__try_flutter card">

    <div class="homepage__try_today">现在就来体验 Flutter，轻松入门。</div>

    <div class="homepage__button_row">
    <a href="/get-started/install/" class="get-started-button">开始</a>
    </div>

</section>


</article>

          </div>
        </div>

        
      </div> <!-- /.row -->
    </div> <!-- /.container -->

    <footer class="site-footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="logo">
          <img src="/images/flutter-mark-square-100.png" alt="Flutter Logo" width="100" height="100">
        </div>
        <p class="site-footer__link-list">
          <a href="https://groups.google.com/forum/#!forum/flutter-dev">flutter-dev@</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/">privacy</a> &bull;
          <a href="https://github.com/orgs/flutter-dev/teams/flutter/">翻译组</a>
        </p>

        <p class="licenses">
          除非另有说明，否则本作品根据
          <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可证</a>进行许可，代码示例已根据 BSD 许可证进行许可。
        </p>
      </div>
    </div>
  </div>
</footer>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/js/sidebar_toggle.js"></script>
    <script src="/js/customscripts.js"></script>
    <script src="/js/prism.js"></script>
    <script src="/js/tabs.js"></script>
    <script src="/js/archive.js"></script>
    
    <script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script>
  </body>
</html>