text: [
    {
      "name": "Container",
      "categories": [
        "Basics"
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "description": "一个拥有绘制、定位、调整大小的 widget。",
      "link": "https://docs.flutter.io/flutter/widgets/Container-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><marker id='arrow-container-1' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#f50057'/></marker><marker id='arrow-container-2' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#ffffff'/></marker><filter id='shadow-container' x='-50%' y='-50%' width='200%' height='200%'><feGaussianBlur stdDeviation='4'/></filter><linearGradient id='gradient-container' x1='0' y1='0.2' x2='0.4' y2='0.9'><stop offset='55%' stop-color='#ffffff'/><stop offset='100%' stop-color='#fdccdd'/></linearGradient></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='15' y='25' width='70' height='47.5' rx='10' ry='10' fill='#000000' filter='url(#shadow-container)'/><rect x='15' y='25' width='70' height='47.5' rx='10' ry='10' fill='url(#gradient-container)' stroke-width='5' stroke='#3b75ad'/><rect x='30' y='40' width='40' height='30' fill='#4dd0e1'/><line x1='20' y1='55' x2='27' y2='55' stroke='#f50057' stroke-width='2' marker-start='url(#arrow-container-1)' marker-end='url(#arrow-container-1)'/><line x1='73' y1='55' x2='80' y2='55' stroke='#f50057' stroke-width='2' marker-start='url(#arrow-container-1)' marker-end='url(#arrow-container-1)'/><line x1='50' y1='30' x2='50' y2='37' stroke='#f50057' stroke-width='2' marker-start='url(#arrow-container-1)' marker-end='url(#arrow-container-1)'/><line x1='50' y1='78' x2='50' y2='82' stroke='#f50057' stroke-width='2' marker-start='url(#arrow-container-1)' marker-end='url(#arrow-container-1)'/><line x1='16' y1='17.5' x2='85' y2='17.5' stroke='#ffffff' stroke-width='2' marker-start='url(#arrow-container-2)' marker-end='url(#arrow-container-2)'/><line x1='7.5' y1='26' x2='7.5' y2='72' stroke='#ffffff' stroke-width='2' marker-start='url(#arrow-container-2)' marker-end='url(#arrow-container-2)'/></svg>"
    },
    {
      "name": "Row",
      "description": "在水平方向上排列子widget的列表。",
      "categories": [
        "Basics"
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Row-class.html",
      "image": "<svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='10' y='30' width='80' height='40' fill='#ffffff'/><rect x='15' y='40' width='20' height='20' fill='#4dd0e1'/><rect x='40' y='35' width='30' height='30' fill='#4dd0e1'/></svg>"
    },
    {
      "name": "Column",
      "description": "在垂直方向上排列子widget的列表。",
      "categories": [
        "Basics"
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Column-class.html",
      "image": "<svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='30' y='10' width='40' height='80' fill='#ffffff'/><rect x='40' y='15' width='20' height='20' fill='#4dd0e1'/><rect x='35' y='40' width='30' height='30' fill='#4dd0e1'/></svg>"
    },
    {
      "name": "Image",
      "description": "一个显示图片的widget",
      "categories": [
        "Basics",
        "Assets, Images, and Icons"
      ],
      "subcategories": [
        "信息展示"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Image-class.html",
      "image": "<svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='20' y='20' width='60' height='60' fill='#ffffff'/><image x='22.5' y='22.5' width='55' height='55' xlink:href='/images/owl.jpg'/></svg>"
    },
    {
      "name": "Text",
      "description": "单一格式的文本",
      "categories": [
        "Basics",
        "Text"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/widgets/Text-class.html",
      "image": "<svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='20' y='30' width='60' height='40' fill='#ffffff'/><text x='50' y='60' text-anchor='middle' font-family='Roboto' font-size='25' fill='#3b75ad'>Abc</text></svg>"
    },
    {
      "name": "Icon",
      "description": "A Material Design icon.",
      "categories": [
        "Basics",
        "Assets, Images, and Icons"
      ],
      "subcategories": [
        "信息展示"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Icon-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "RaisedButton",
      "description": "Material Design中的button， 一个凸起的材质矩形按钮",
      "categories": [
        "Basics"
      ],
      "subcategories": [
        "按钮"
      ],
      "link": "https://docs.flutter.io/flutter/material/RaisedButton-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VbDh6YmNiYVc3SHM/components_buttons_usage2.png'>"
    },
    {
      "name": "Scaffold",
      "sample": "Scaffold_index",
      "description": "Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。",
      "categories": [
        "Basics"
      ],
      "subcategories": [
        "App结构和导航"
      ],
      "link": "https://docs.flutter.io/flutter/material/Scaffold-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bx4BSt6jniD7T0hfM01sSmRyTG8/layout_structure_regions_mobile.png'>"
    },
    {
      "name": "Appbar",
      "sample": "AppBar_index",
      "description": "一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。",
      "categories": [
        "Basics"
      ],
      "subcategories": [
        "App结构和导航"
      ],
      "link": "https://docs.flutter.io/flutter/material/AppBar-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VclpfSFpuelBGR1k/components_toolbars.png'>"
    },
    {
      "name": "FlutterLogo",
      "description": "Flutter logo, 以widget形式. 这个widget遵从IconTheme。",
      "categories": [
        "Basics"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/material/FlutterLogo-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Stack",
      "description": "可以允许其子widget简单的堆叠在一起",
      "categories": [
        "Stack"
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Stack-class.html",
      "image": "<svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='10' y='10' width='80' height='80' fill='#ffffff'/><rect x='25' y='25' width='40' height='30' fill='#3b75ad'/><rect x='45' y='35' width='30' height='30' fill='#4dd0e1'/><rect x='40' y='50' width='10' height='10' fill='#f50057'/></svg>"
    },
    {
      "name": "Placeholder",
      "description": "一个绘制了一个盒子的的widget，代表日后有widget将会被添加到该盒子中",
      "categories": [
        "Basics"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/widgets/Placeholder-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "BottomNavigationBar",
      "description": "底部导航条，可以很容易地在tap之间切换和浏览顶级视图。",
      "categories": [],
      "subcategories": [
        "App结构和导航"
      ],
      "link": "https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VWG5nei0wWXpoczA/components_bottom_navigation.png'>"
    },
    {
      "name": "TabBar",
      "sample": "TabBar_index",
      "description": "一个显示水平选项卡的Material Design widget。",
      "categories": [],
      "subcategories": [
        "App结构和导航"
      ],
      "link": "https://docs.flutter.io/flutter/material/TabBar-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VaWdBdnhMT3ViXzQ/components_tabs.png'>"
    },
    {
      "name": "TabBarView",
      "sample": "TabBarView_index",
      "description": "显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。",
      "categories": [],
      "subcategories": [
        "App结构和导航"
      ],
      "link": "https://docs.flutter.io/flutter/material/TabBarView-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B7WCemMG6e0VaWdBdnhMT3ViXzQ/components_tabs.png'>"
    },
    {
      "name": "MaterialApp",
      "description": "一个方便的widget，它封装了应用程序实现Material Design所需要的一些widget。",
      "categories": [],
      "subcategories": [
        "App结构和导航"
      ],
      "link": "https://docs.flutter.io/flutter/material/MaterialApp-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bx4BSt6jniD7Y1huOXVQdlFPMmM/materialdesign_introduction.png'>"
    },
    {
      "name": "WidgetsApp",
      "description": "一个方便的类，它封装了应用程序通常需要的一些widget。",
      "categories": [],
      "subcategories": [
        "App结构和导航"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/WidgetsApp-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Drawer",
      "description": "从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板。",
      "categories": [],
      "subcategories": [
        "App结构和导航"
      ],
      "link": "https://docs.flutter.io/flutter/material/Drawer-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B7WCemMG6e0VaDhWUXJTTng4ZGs/patterns_navigation_drawer.png'>"
    },
    {
      "name": "FloatingActionButton",
      "description": "一个圆形图标按钮，它悬停在内容之上，以展示应用程序中的主要动作。FloatingActionButton通常用于Scaffold.floatingActionButton字段。",
      "categories": [],
      "subcategories": [
        "按钮"
      ],
      "link": "https://docs.flutter.io/flutter/material/FloatingActionButton-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VN20tOXJoUjVxQjg/components_buttons_fab.png'>"
    },
    {
      "name": "FlatButton",
      "description": "一个扁平的Material按钮",
      "categories": [],
      "subcategories": [
        "按钮"
      ],
      "link": "https://docs.flutter.io/flutter/material/FlatButton-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VNDg3V3ZjU2hsNGc/components_buttons_usage3.png'>"
    },
    {
      "name": "IconButton",
      "sample": "IconButton_index",
      "description": "一个Material图标按钮，点击时会有水波动画",
      "categories": [],
      "subcategories": [
        "按钮"
      ],
      "link": "https://docs.flutter.io/flutter/material/IconButton-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B_udO5B8pzrzdXVuTlBoOTBjcU0/components_buttons_other1.png'>"
    },
    {
      "name": "PopupMenuButton",
      "sample": "PopupMenuButton_index",
      "description": "当菜单隐藏式，点击或调用onSelected时显示一个弹出式菜单列表",
      "categories": [],
      "subcategories": [
        "按钮"
      ],
      "link": "https://docs.flutter.io/flutter/material/PopupMenuButton-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B7WCemMG6e0VakJ6a0F2MFJaaDQ/components_menus.png'>"
    },
    {
      "name": "ButtonBar",
      "description": "水平排列的按钮组",
      "categories": [],
      "subcategories": [
        "按钮"
      ],
      "link": "https://docs.flutter.io/flutter/material/ButtonBar-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "TextField",
      "description": "文本输入框",
      "categories": [],
      "subcategories": [
        "输入框和选择框"
      ],
      "link": "https://docs.flutter.io/flutter/material/TextField-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VbURLNTM0N0R6eUE/components_text_fields.png'>"
    },
    {
      "name": "Checkbox",
      "description": "复选框，允许用户从一组中选择多个选项。",
      "categories": [],
      "subcategories": [
        "输入框和选择框"
      ],
      "link": "https://docs.flutter.io/flutter/material/Checkbox-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_9/0Bx4BSt6jniD7T2xGbGo0cUlPVG8/components_switches_check1.png'>"
    },
    {
      "name": "Radio",
      "description": "单选框，允许用户从一组中选择一个选项。 ",
      "categories": [],
      "subcategories": [
        "输入框和选择框"
      ],
      "link": "https://docs.flutter.io/flutter/material/Radio-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_9/0Bx4BSt6jniD7Z1NaaXh2ZkpDRkE/components_switches_radio1.png'>"
    },
    {
      "name": "Switch",
      "description": "On/off 用于切换一个单一状态",
      "categories": [],
      "subcategories": [
        "输入框和选择框"
      ],
      "link": "https://docs.flutter.io/flutter/material/Switch-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_9/0Bx4BSt6jniD7NDg4aGIzVXYxVEE/components_switches_switch1.png'>"
    },
    {
      "name": "Slider",
      "description": "滑块，允许用户通过滑动滑块来从一系列值中选择。",
      "categories": [],
      "subcategories": [
        "输入框和选择框"
      ],
      "link": "https://docs.flutter.io/flutter/material/Slider-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VTmJrQUYzajFIclE/components_sliders.png'>"
    },
    {
      "name": "Date & Time Pickers",
      "description": "日期&时间选择器",
      "categories": [],
      "subcategories": [
        "输入框和选择框"
      ],
      "link": "https://docs.flutter.io/flutter/material/showDatePicker.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VY2h4WElGdEhPb2c/components_pickers.png'>"
    },
    {
      "name": "SimpleDialog",
      "description": "简单对话框可以显示附加的提示或操作",
      "categories": [],
      "subcategories": [
        "对话框、Alert、Panel"
      ],
      "link": "https://docs.flutter.io/flutter/material/SimpleDialog-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VVGNnN3NvMGdoQTg/components_dialogs.png'>"
    },
    {
      "name": "AlertDialog",
      "description": "一个会中断用户操作的对话款，需要用户确认",
      "categories": [],
      "subcategories": [
        "对话框、Alert、Panel"
      ],
      "link": "https://docs.flutter.io/flutter/material/AlertDialog-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0Bzhp5Z4wHba3TzFHYVlrbWF2bnM/components_alerts_1.png'>"
    },
    {
      "name": "BottomSheet",
      "description": "BottomSheet是一个从屏幕底部滑起的列表（以显示更多的内容）。你可以调用showBottomSheet()或showModalBottomSheet弹出",
      "categories": [],
      "subcategories": [
        "对话框、Alert、Panel"
      ],
      "link": "https://docs.flutter.io/flutter/material/BottomSheet-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VVWZzZ1FIN09XWGc/components_bottom_sheets.png'>"
    },
    {
      "name": "ExpansionPanel",
      "description": "Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.",
      "categories": [],
      "subcategories": [
        "对话框、Alert、Panel"
      ],
      "link": "https://docs.flutter.io/flutter/material/ExpansionPanel-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VOXF3eEJ3azZMSjg/components_expansion_panels.png'>"
    },
    {
      "name": "SnackBar",
      "description": "具有可选操作的轻量级消息提示，在屏幕的底部显示。",
      "categories": [],
      "subcategories": [
        "对话框、Alert、Panel"
      ],
      "link": "https://docs.flutter.io/flutter/material/SnackBar-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VSjZkendtc19iZ2M/components_snackbars.png'>"
    },
    {
      "name": "Chip",
      "description": "标签，一个Material widget。 它可以将一个复杂内容实体展现在一个小块中，如联系人。",
      "categories": [],
      "subcategories": [
        "信息展示"
      ],
      "link": "https://docs.flutter.io/flutter/material/Chip-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VM1VORGxxWUx5U0E/components_chips.png'>"
    },
    {
      "name": "Tooltip",
      "description": "一个文本提示工具，帮助解释一个按钮或其他用户界面，当widget长时间按下时（当用户采取其他适当操作时）显示一个提示标签。",
      "categories": [],
      "subcategories": [
        "信息展示"
      ],
      "link": "https://docs.flutter.io/flutter/material/Tooltip-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VZ1JKMzJFcmhOWkk/components_tooltips.png'>"
    },
    {
      "name": "DataTable",
      "description": "数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget实现这个组件",
      "categories": [],
      "subcategories": [
        "信息展示"
      ],
      "link": "https://docs.flutter.io/flutter/material/DataTable-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VWTJHMmJZdWZ5LU0/components_data_tables.png'>"
    },
    {
      "name": "Card",
      "description": "一个 Material Design 卡片。拥有一个圆角和阴影 ",
      "categories": [],
      "subcategories": [
        "信息展示"
      ],
      "link": "https://docs.flutter.io/flutter/material/Card-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VR0ptbC1RV1NLNlk/components_cards.png'>"
    },
    {
      "name": "LinearProgressIndicator",
      "description": "一个线性进度条，另外还有一个圆形进度条CircularProgressIndicator",
      "categories": [],
      "subcategories": [
        "信息展示"
      ],
      "link": "https://docs.flutter.io/flutter/material/LinearProgressIndicator-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VWkJiRjRLbzRNS3M/components_progress_and_activity.png'>"
    },
    {
      "name": "ListTile",
      "description": "一个固定高度的行，通常包含一些文本，以及一个行前或行尾图标。",
      "categories": [],
      "subcategories": [
        "布局"
      ],
      "link": "https://docs.flutter.io/flutter/material/ListTile-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0Bx4BSt6jniD7UUw0bzVwU2lMUHc/components_lists_keylines_single10.png'>"
    },
    {
      "name": "Stepper",
      "description": "一个Material Design 步骤指示器，显示一系列步骤的过程",
      "categories": [],
      "subcategories": [
        "布局"
      ],
      "link": "https://docs.flutter.io/flutter/material/Stepper-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VTndyUnNCR2tQREE/components_steppers.png'>"
    },
    {
      "name": "Divider",
      "description": "一个逻辑1像素厚的水平分割线，两边都有填充",
      "categories": [],
      "subcategories": [
        "布局"
      ],
      "link": "https://docs.flutter.io/flutter/material/Divider-class.html",
      "image": "<img alt='' src='https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VUVlmbHM1Q013RU0/components_dividers.png'>"
    },
    {
      "name": "CupertinoActivityIndicator",
      "description": "一个iOS风格的loading指示器。显示一个圆形的转圈菊花",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoActivityIndicator-class.html",
      "image": "<img alt='' src='/images/widget-catalog/cupertino-activity-indicator.png'>"
    },
    {
      "name": "CupertinoAlertDialog",
      "description": "iOS风格的alert dialog.",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoAlertDialog-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "CupertinoButton",
      "description": "iOS风格的button.",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoButton-class.html",
      "image": "<img alt='' src='/images/widget-catalog/cupertino-button.png'>"
    },
    {
      "name": "CupertinoDialog",
      "description": "iOS风格的对话框",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoDialog-class.html",
      "image": "<img alt='' src='/images/widget-catalog/cupertino-dialog.png'>"
    },
    {
      "name": "CupertinoDialogAction",
      "description": "通常用于CupertinoAlertDialog的一个button",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoDialogAction-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "CupertinoSlider",
      "description": "从一个范围中选一个值.",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoSlider-class.html",
      "image": "<img alt='' src='/images/widget-catalog/cupertino-slider.png'>"
    },
    {
      "name": "CupertinoSwitch",
      "description": "iOS风格的开关. 用于单一状态的开/关",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoSwitch-class.html",
      "image": "<img alt='' src='/images/widget-catalog/cupertino-switch.png'>"
    },
    {
      "name": "CupertinoPageTransition",
      "description": "提供iOS风格的页面过度动画",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoPageTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "CupertinoFullscreenDialogTransition",
      "description": "一个iOS风格的过渡，用于调用全屏对话框。",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoFullscreenDialogTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "CupertinoNavigationBar",
      "description": "iOS风格的导航栏. 通常和CupertinoPageScaffold一起使用。",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoNavigationBar-class.html",
      "image": "<img alt='' src='/images/widget-catalog/cupertino-nav-bar.png'>"
    },
    {
      "name": "CupertinoTabBar",
      "description": "iOS风格的底部选项卡。 通常和CupertinoTabScaffold一起使用。",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoTabBar-class.html",
      "image": "<img alt='' src='/images/widget-catalog/cupertino-tab-bar.png'>"
    },
    {
      "name": "CupertinoPageScaffold",
      "description": "一个iOS风格的页面的基本布局结构。包含内容和导航栏",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoPageScaffold-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "CupertinoTabScaffold",
      "description": "标签式iOS应用程序的结构。将选项卡栏放在内容选项卡之上",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoTabScaffold-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "CupertinoTabView",
      "description": "支持选项卡间并行导航项卡的根内容。通常与CupertinoTabScaffolde一起使用",
      "categories": [
        "Cupertino (iOS-style widgets)"
      ],
      "subcategories": [],
      "link": "https://docs.flutter.io/flutter/cupertino/CupertinoTabView-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Padding",
      "description": "一个widget, 会给其子widget添加指定的填充",
      "categories": [
        "Styling"
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Padding-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><marker id='arrow-padding' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#f50057'/></marker></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='10' y='20' width='80' height='60' fill='#ffffff'/><rect x='25' y='30' width='50' height='30' fill='#4dd0e1'/><line x1='13' y1='45' x2='22' y2='45' stroke='#f50057' stroke-width='2' marker-start='url(#arrow-padding)' marker-end='url(#arrow-padding)'/><line x1='78' y1='45' x2='87' y2='45' stroke='#f50057' stroke-width='2' marker-start='url(#arrow-padding)' marker-end='url(#arrow-padding)'/><line x1='50' y1='23' x2='50' y2='27' stroke='#f50057' stroke-width='2' marker-start='url(#arrow-padding)' marker-end='url(#arrow-padding)'/><line x1='50' y1='63' x2='50' y2='77' stroke='#f50057' stroke-width='2' marker-start='url(#arrow-padding)' marker-end='url(#arrow-padding)'/></svg>"
    },
    {
      "name": "Center",
      "description": "将其子widget居中显示在自身内部的widget",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Center-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><marker id='arrow-center' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#f50057'/></marker></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='10' y='20' width='80' height='60' fill='#ffffff'/><rect x='25' y='35' width='50' height='30' fill='#4dd0e1'/><line x1='10' y1='50' x2='22' y2='50' stroke='#f50057' stroke-width='2' marker-end='url(#arrow-center)'/><line x1='90' y1='50' x2='78' y2='50' stroke='#f50057' stroke-width='2' marker-end='url(#arrow-center)'/><line x1='50' y1='20' x2='50' y2='32' stroke='#f50057' stroke-width='2' marker-end='url(#arrow-center)'/><line x1='50' y1='80' x2='50' y2='68' stroke='#f50057' stroke-width='2' marker-end='url(#arrow-center)'/></svg>"
    },
    {
      "name": "Align",
      "description": "一个widget，它可以将其子widget对齐，并可以根据子widget的大小自动调整大小。",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Align-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><marker id='arrow-align' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#f50057'/></marker></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='10' y='20' width='80' height='60' fill='#ffffff'/><rect x='15' y='50' width='50' height='30' fill='#4dd0e1'/><line x1='10' y1='65' x2='12' y2='65' stroke='#f50057' stroke-width='2' marker-end='url(#arrow-align)'/><line x1='90' y1='65' x2='68' y2='65' stroke='#f50057' stroke-width='2' marker-end='url(#arrow-align)'/><line x1='40' y1='20' x2='40' y2='47' stroke='#f50057' stroke-width='2' marker-end='url(#arrow-align)'/></svg>"
    },
    {
      "name": "FittedBox",
      "description": "按自己的大小调整其子widget的大小和位置。",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/FittedBox-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AspectRatio",
      "description": "一个widget，试图将子widget的大小指定为某个特定的长宽比",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AspectRatio-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><marker id='arrow-aspect-ratio' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#ffffff'/></marker></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='25' y='35' width='50' height='30' fill='#ffffff'/><rect x='27.5' y='37.5' width='45' height='25' fill='#4dd0e1'/><line x1='31' y1='41' x2='69' y2='59' stroke='#ffffff' stroke-width='2' marker-start='url(#arrow-aspect-ratio)' marker-end='url(#arrow-aspect-ratio)'/></svg>"
    },
    {
      "name": "ConstrainedBox",
      "description": "对其子项施加附加约束的widget",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ConstrainedBox-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><marker id='arrow-constrained-box' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#ffffff'/></marker></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='20' y='30' width='50' height='40' fill='#ffffff'/><rect x='22.5' y='32.5' width='45' height='35' fill='#4dd0e1'/><path d='M63 23 v 40' stroke='#ffffff' stroke-width='1' stroke-linecap='round' stroke-dasharray='0.5 3.1' fill='transparent'/><path d='M77 23 v 54' stroke='#ffffff' stroke-width='1' stroke-linecap='round' stroke-dasharray='0.5 3.1' fill='transparent'/><path d='M13 63 h 50' stroke='#ffffff' stroke-width='1' stroke-linecap='round' stroke-dasharray='0.5 3.1' fill='transparent'/><path d='M13 77 h 64' stroke='#ffffff' stroke-width='1' stroke-linecap='round' stroke-dasharray='0.5 3.1' fill='transparent'/><path d='M50 25 L60 25' stroke='#ffffff' stroke-width='2' marker-end='url(#arrow-constrained-box)'/><path d='M90 25 L80 25' stroke='#ffffff' stroke-width='2' marker-end='url(#arrow-constrained-box)'/><path d='M15 50 L15 60' stroke='#ffffff' stroke-width='2' marker-end='url(#arrow-constrained-box)'/><path d='M15 90 L15 80' stroke='#ffffff' stroke-width='2' marker-end='url(#arrow-constrained-box)'/></svg>"
    },
    {
      "name": "Baseline",
      "description": "根据子项的基线对它们的位置进行定位的widget。",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Baseline-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><marker id='arrow-baseline' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#ffffff'/></marker></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='20' y='20' width='60' height='50' fill='#ffffff'/><rect x='20' y='45' width='60' height='30' fill='#4dd0e1'/><line x1='85' y1='20' x2='85' y2='66' stroke='#ffffff' stroke-width='2' marker-end='url(#arrow-baseline)'/><line x1='15' y1='20' x2='15' y2='66' stroke='#ffffff' stroke-width='2' marker-end='url(#arrow-baseline)'/><line x1='10' y1='70' x2='90' y2='70' stroke='#ffffff' stroke-width='2'/><text x='50' y='69' text-anchor='middle' font-family='Roboto' font-size='25' fill='#3b75ad'>Abc </text></svg>"
    },
    {
      "name": "FractionallySizedBox",
      "description": "一个widget，它把它的子项放在可用空间的一小部分。关于布局算法的更多细节，见RenderFractionallySizedOverflowBox",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/FractionallySizedBox-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "IntrinsicHeight",
      "description": "一个widget，它将它的子widget的高度调整其本身实际的高度",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/IntrinsicHeight-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "IntrinsicWidth",
      "description": "一个widget，它将它的子widget的宽度调整其本身实际的宽度",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/IntrinsicWidth-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "LimitedBox",
      "description": "一个当其自身不受约束时才限制其大小的盒子",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/LimitedBox-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Offstage",
      "description": "一个布局widget，可以控制其子widget的显示和隐藏。",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Offstage-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "OverflowBox",
      "description": "对其子项施加不同约束的widget，它可能允许子项溢出父级。",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/OverflowBox-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "SizedBox",
      "description": "一个特定大小的盒子。这个widget强制它的孩子有一个特定的宽度和高度。如果宽度或高度为NULL，则此widget将调整自身大小以匹配该维度中的孩子的大小。",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/SizedBox-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><marker id='arrow-sized-box' orient='auto-start-reverse' viewBox='0 0 1 1' markerWidth='3' markerHeight='3' refX='0.5' refY='0.5'><path d='M 1 0.5 L 0.5 0 L 0.5 1 z' fill='#ffffff'/></marker></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='25' y='35' width='50' height='30' fill='#ffffff'/><rect x='27.5' y='37.5' width='45' height='25' fill='#4dd0e1'/><line x1='28' y1='30' x2='72' y2='30' stroke='#ffffff' stroke-width='2' marker-start='url(#arrow-sized-box)' marker-end='url(#arrow-sized-box)'/><line x1='20' y1='38' x2='20' y2='62' stroke='#ffffff' stroke-width='2' marker-start='url(#arrow-sized-box)' marker-end='url(#arrow-sized-box)'/></svg>"
    },
    {
      "name": "SizedOverflowBox",
      "description": "一个特定大小的widget，但是会将它的原始约束传递给它的孩子，它可能会溢出。",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/SizedOverflowBox-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Transform",
      "description": "在绘制子widget之前应用转换的widget。",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Transform-class.html",
      "image": "<svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='17.5' y='42.5' width='50' height='30' fill='#ffffff'/><rect x='20' y='45' width='45' height='25' fill='#3b75ad'/><rect x='20' y='45' width='45' height='25' fill='#4dd0e1' transform='translate(15 -5) rotate(-23) skewX(-10)'/></svg>"
    },
    {
      "name": "CustomSingleChildLayout",
      "description": "一个自定义的拥有单个子widget的布局widget",
      "categories": [
      ],
      "subcategories": [
       "拥有单个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/CustomSingleChildLayout-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "IndexedStack",
      "description": "从一个子widget列表中显示单个孩子的Stack",
      "categories": [
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/IndexedStack-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Flow",
      "description": "一个实现流式布局算法的widget",
      "categories": [
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Flow-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Table",
      "description": "为其子widget使用表格布局算法的widget",
      "categories": [
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Table-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Wrap",
      "description": "可以在水平或垂直方向多行显示其子widget。",
      "categories": [
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Wrap-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "ListBody",
      "description": "一个widget，它沿着一个给定的轴，顺序排列它的子元素",
      "categories": [
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ListBody-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "ListView",
      "sample": "ListView_index",
      "description": "可滚动的列表控件。ListView是最常用的滚动widget，它在滚动方向上一个接一个地显示它的孩子。在纵轴上，孩子们被要求填充ListView。",
      "categories": [
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ListView-class.html",
      "image": "<svg viewBox='0 0 100 100'><filter id='inset-shadow-block' x='-50%' y='-50%' width='200%' height='200%'><feComponentTransfer in='SourceAlpha'><feFuncA type='table' tableValues='1 0' /></feComponentTransfer><feGaussianBlur stdDeviation='2' result='Blur'/><feFlood flood-color='#666666' result='color'/><feComposite in2='Blur' operator='in'/><feComposite in2='SourceAlpha' operator='in' /><feMerge><feMergeNode /></feMerge></filter><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='30' y='10' width='40' height='80' fill='#ffffff'/><rect x='35' y='10' width='30' height='15' fill='#4dd0e1'/><rect x='35' y='30' width='30' height='20' fill='#4dd0e1'/><rect x='35' y='55' width='30' height='5' fill='#4dd0e1'/><rect x='35' y='65' width='30' height='15' fill='#4dd0e1'/><rect x='35' y='85' width='30' height='5' fill='#4dd0e1'/><rect x='30' y='10' width='40' height='80' fill='#ffffff' filter='url(#inset-shadow-block)'/></svg>"
    },
    {
      "name": "CustomMultiChildLayout",
      "description": "使用一个委托来对多个孩子进行设置大小和定位的小部件",
      "categories": [
      ],
      "subcategories": [
        "拥有多个子元素的布局widget"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/CustomMultiChildLayout-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "LayoutBuilder",
      "description": "构建一个可以依赖父窗口大小的widget树。",
      "categories": [
      ],
      "subcategories": [
        "Layout helpers"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/LayoutBuilder-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "RichText",
      "description": "一个富文本Text，可以显示多种样式的text。",
      "categories": [
        "Text"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/RichText-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "DefaultTextStyle",
      "description": "文字样式，用于指定Text widget的文字样式",
      "categories": [
        "Text"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/DefaultTextStyle-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "RawImage",
      "description": "一个直接显示dart:ui.Image的widget",
      "categories": [
        "Assets, Images, and Icons"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/RawImage-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AssetBundle",
      "description": "包含应用程序可以使用的资源，如图像和字符串。对这些资源的访问是异步，所以他们可以来自网络（例如，从NetworkAssetBundle）或从本地文件系统，这并不会挂起用户界面。",
      "categories": [
        "Assets, Images, and Icons"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/services/AssetBundle-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Form",
      "description": "一个可选的、用于给多个TextField分组的widget",
      "categories": [
        "Input"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Form-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "FormField",
      "description": "一个单独的表单字段。此widget维护表单字段的当前状态，以便在UI中直观地反映更新和验证错误。",
      "categories": [
        "Input"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/FormField-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "RawKeyboardListener",
      "description": "每当用户按下或释放键盘上的键时调用回调的widget。",
      "categories": [
        "Input"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/RawKeyboardListener-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedContainer",
      "description": "在一段时间内逐渐改变其值的容器。",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedContainer-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedCrossFade",
      "description": "一个widget，在两个孩子之间交叉淡入，并同时调整他们的尺寸",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedCrossFade-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Hero",
      "description": "将其子项标记为hero动画候选的widget。",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
        "Routing"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Hero-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedBuilder",
      "description": "用于构建动画的通用小部件。AnimatedBuilder在有多个widget希望有一个动画作为一个较大的建造函数部分时会非常有用。要使用AnimatedBuilder，只需构建widget并将其传给builder函数即可。",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedBuilder-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Draggable",
      "description": "一个可拖动的widget",
      "categories": [
      ],
      "subcategories": [
        "Touch interactions"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Draggable-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "LongPressDraggable",
      "description": "可以使其子widget在长按时可拖动",
      "categories": [
        "交互Widget"
      ],
      "subcategories": [
        "Touch interactions"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/LongPressDraggable-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "GestureDetector",
      "description": "一个检测手势的widget",
      "categories": [
        "交互Widget"
      ],
      "subcategories": [
        "Touch interactions"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/GestureDetector-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "DragTarget",
      "description": "一个拖动的目标widget，在完成拖动时它可以接收数据",
      "categories": [
        "交互Widget"
      ],
      "subcategories": [
        "Touch interactions"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/DragTarget-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Dismissible",
      "description": "可以在拖动时隐藏的widget",
      "categories": [
        "交互Widget"
      ],
      "subcategories": [
        "Touch interactions"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Dismissible-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "IgnorePointer",
      "description": "在hit test中不可见的widget。当ignoring为true时，此widget及其子树不响应事件。但它在布局过程中仍然消耗空间，并像往常一样绘制它的孩子。它是无法捕获事件对象、因为它在RenderBox.hitTest中返回false ",
      "categories": [
        "交互Widget"
      ],
      "subcategories": [
        "Touch interactions"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/IgnorePointer-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AbsorbPointer",
      "description": "在hit test期间吸收(拦截)事件。当absorbing为true时，此小部件阻止其子树通过终止命中测试来接收指针事件。它在布局过程中仍然消耗空间，并像往常一样绘制它的孩子。它只是防止其孩子成为事件命中目标，因为它从RenderBox.hitTest返回true。",
      "categories": [
        "交互Widget"
      ],
      "subcategories": [
        "Touch interactions"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AbsorbPointer-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Navigator",
      "description": "导航器，可以在多个页面(路由)栈之间跳转。",
      "categories": [
        "交互Widget"
      ],
      "subcategories": [
        "Routing"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Navigator-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Theme",
      "description": "将主题应用于子widget。主题描述了应用选择的颜色和字体。",
      "categories": [
        "Styling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/material/Theme-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "MediaQuery",
      "description": "建立一个子树，在树中媒体查询解析不同的给定数据",
      "categories": [
        "Styling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/MediaQuery-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "ListView",
      "description": "一个可滚动的列表",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ListView-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "NestedScrollView",
      "description": "一个可以嵌套其它可滚动widget的widget",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/NestedScrollView-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "GridView",
      "description": "一个可滚动的二维空间数组",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/GridView-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "SingleChildScrollView",
      "description": "有一个子widget的可滚动的widget，子内容超过父容器时可以滚动。",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/SingleChildScrollView-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Scrollable",
      "description": "实现了可滚动widget的交互模型，但不包含UI显示相关的逻辑",
      "categories": [
        "Scrolling",
        "交互Widget"
      ],
      "subcategories": [
        "Touch interactions"
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Scrollable-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Scrollbar",
      "description": "一个Material Design 滚动条，表示当前滚动到了什么位置",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/material/Scrollbar-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "CustomScrollView",
      "description": "一个使用slivers创建自定义的滚动效果的ScrollView",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/CustomScrollView-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "NotificationListener",
      "description": "一个用来监听树上冒泡通知的widget。",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/NotificationListener-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "ScrollConfiguration",
      "description": "控制可滚动组件在子树中的表现行为",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ScrollConfiguration-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "RefreshIndicator",
      "description": "Material Design下拉刷新指示器，包装一个可滚动widget",
      "categories": [
        "Scrolling"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/material/RefreshIndicator-class.html",
      "image": "<img alt='' src='https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B7WCemMG6e0VS2kzSmZwNnNKQVk/patterns-swipe-to-refresh.png'>"
    },
    {
      "name": "Opacity",
      "description": "使其子widget透明的widget。",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Opacity-class.html",
      "image": "<svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='10' y='10' width='60' height='60' fill='#3b75ad'/><rect x='20' y='30' width='70' height='50' fill='#ffffff' opacity='0.8'/></svg>"
    },
    {
      "name": "Transform",
      "description": "在绘制子widget之前应用转换的widget。",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Transform-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "DecoratedBox",
      "description": "在孩子绘制之前或之后绘制装饰的widget。",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/DecoratedBox-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><filter id='shadow-decorated-box' x='-50%' y='-50%' width='200%' height='200%'><feGaussianBlur stdDeviation='4'/></filter><linearGradient id='gradient-decorated-box' x1='0' y1='0' x2='0.5' y2='1'><stop offset='50%' stop-color='#ffffff'/><stop offset='100%' stop-color='#f50057'/></linearGradient></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='25' y='25' width='50' height='50' rx='10' ry='10' fill='#000000' filter='url(#shadow-decorated-box)'/><rect x='25' y='25' width='50' height='50' rx='10' ry='10' fill='url(#gradient-decorated-box)' stroke-width='5' stroke='#4dd0e1'/></svg>"
    },
    {
      "name": "FractionalTranslation",
      "description": "绘制盒子之前给其添加一个偏移转换",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/FractionalTranslation-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "RotatedBox",
      "description": "可以延顺时针以90度的倍数旋转其子widget",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/RotatedBox-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "ClipOval",
      "description": "用椭圆剪辑其孩子的widget",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ClipOval-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><clipPath id='clip-oval'><circle cx='40' cy='50' r='30'/></clipPath></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='30' y='10' width='60' height='50' fill='#4dd0e1' opacity='0.05'/><circle cx='40' cy='50' r='30' fill='#ffffff'/><rect x='30' y='10' width='60' height='50' fill='#4dd0e1' clip-path='url(#clip-oval)'/></svg>"
    },
    {
      "name": "ClipPath",
      "description": "用path剪辑其孩子的widget",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ClipPath-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "ClipRect",
      "description": "用矩形剪辑其孩子的widget",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ClipRect-class.html",
      "image": "<svg viewBox='0 0 100 100'><defs><clipPath id='clip-rect'><rect x='10' y='20' width='60' height='60'/></clipPath></defs><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='30' y='10' width='60' height='50' fill='#4dd0e1' opacity='0.05'/><rect x='10' y='20' width='60' height='60' fill='#ffffff'/><rect x='30' y='10' width='60' height='50' fill='#4dd0e1' clip-path='url(#clip-rect)'/></svg>"
    },
    {
      "name": "CustomPaint",
      "description": "提供一个画布的widget，在绘制阶段可以在画布上绘制自定义图形",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/CustomPaint-class.html",
      "image": "<svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><rect x='20' y='20' width='60' height='60' fill='#ffffff'/><ellipse cx='40' cy='35' rx='10' ry='10' stroke-width='5' stroke='#4dd0e1' fill='transparent'/><ellipse cx='20' cy='71' rx='15' ry='20' stroke-width='5' stroke='#4dd0e1' fill='transparent' transform='rotate(-25)'/></svg>"
    },
    {
      "name": "BackdropFilter",
      "description": "一个widget，它将过滤器应用到现有的绘图内容，然后绘制孩子。这种效果是比较昂贵的，尤其是如果过滤器是non-local，如blur。",
      "categories": [
        "Painting and effects"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/BackdropFilter-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "Semantics",
      "description": "一个widget，用以描述widget树的具体语义。使用辅助工具、搜索引擎和其他语义分析软件来确定应用程序的含义。",
      "categories": [
        "Accessibility"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/Semantics-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "MergeSemantics",
      "description": "合并其后代语义的widget。",
      "categories": [
        "Accessibility"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/MergeSemantics-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "ExcludeSemantics",
      "description": "删除其后代所有语义的widget",
      "categories": [
        "Accessibility"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ExcludeSemantics-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "FutureBuilder",
      "description": "基于与Future交互的最新快照来构建自身的widget",
      "categories": [
        "Async"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "StreamBuilder",
      "description": "基于与流交互的最新快照构建自身的widget",
      "categories": [
        "Async"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/StreamBuilder-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "DecoratedBoxTransition",
      "description": "DecoratedBox的动画版本，可以给它的Decoration不同属性使用动画",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/DecoratedBoxTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "FadeTransition",
      "description": "对透明度使用动画的widget",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/FadeTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "PositionedTransition",
      "description": "Positioned的动画版本，它需要一个特定的动画来将孩子的位置从动画的生命周期的起始位置移到结束位置。 ",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/PositionedTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "RotationTransition",
      "description": "对widget使用旋转动画",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/RotationTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "ScaleTransition",
      "description": "对widget使用缩放动画",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/ScaleTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "SizeTransition",
      "description": "Animates its own size and clips and aligns the child.",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/SizeTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "SlideTransition",
      "description": "对相对于其正常位置的某个位置之间使用动画",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/SlideTransition-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedDefaultTextStyle",
      "description": "在文本样式切换时使用动画",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedDefaultTextStyle-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedListState",
      "sample": "AnimatedListState_index",
      "description": "动画列表的state",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedListState-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedModalBarrier",
      "description": "一个阻止用户与widget交互的widget",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedModalBarrier-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedOpacity",
      "description": "Opacity的动画版本，在给定的透明度变化时，自动地在给定的一段时间内改变孩子的Opacity",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedOpacity-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedPhysicalModel",
      "description": "PhysicalModel的动画版本",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedPhysicalModel-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedPositioned",
      "description": "动画版本的Positioned，每当给定位置的变化，自动在给定的时间内转换孩子的位置。",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedPositioned-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedSize",
      "description": "动画widget，当给定的孩子的大小变化时，它自动地在给定时间内转换它的大小。",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedSize-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedWidget",
      "description": "当给定的Listenable改变值时，会重新构建该widget",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedWidget-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    },
    {
      "name": "AnimatedWidgetBaseState",
      "description": "具有隐式动画的widget的基类",
      "categories": [
        "Animation and Motion"
      ],
      "subcategories": [
      ],
      "link": "https://docs.flutter.io/flutter/widgets/AnimatedWidgetBaseState-class.html",
      "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
    }
  ]
  