In this lesson we’ll learn how to import widgets we’ve created in other files & use them in our project. We'll also look at how to create dynamic properties in our widgets in order to make them reusable across our application.

We have the CLI generate code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
brightness: Brightness.dark,
primaryTextTheme: TextTheme(
title: TextStyle(
color: Colors.pinkAccent
)
),
primarySwatch: Colors.deepPurple,
),
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: ,
height: ,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular()
),
child: Text(
"Hello Flutter",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w500,
fontSize: 22.0
)
)
)
],
)
)
),
);
}
}

We want to replace the highlighted part with reusable Widget.

import 'package:flutter/material.dart';

class Greeting extends StatelessWidget {
// To get passed in arg
Greeting({
@required this.greeting,
this.color = Colors.green
});
// need to create a variable to hold greeting
final String greeting;
final Color color;
@override
Widget build(BuildContext context) {
return Text(
this.greeting,
style: TextStyle(
color: this.color,
fontSize:
)
);
}
}

Use it:

import 'package:flutter/material.dart';
import 'package:my_flutter_app/Greeting.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
brightness: Brightness.dark,
primaryTextTheme: TextTheme(
title: TextStyle(
color: Colors.pinkAccent
)
),
primarySwatch: Colors.deepPurple,
),
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: ,
height: ,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular()
),
child: Greeting(greeting: "Hey you!", color: Colors.blue)
)
],
)
)
),
);
}
}

[Flutter] Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application的更多相关文章

  1. 17.1.1.6 Creating a Data Snapshot Using Raw Data Files 创建一个数据快照使用 Raw Data Files

    17.1.1.6 Creating a Data Snapshot Using Raw Data Files 创建一个数据快照使用 Raw Data Files 如果数据库是大的, 复制raw 数据文 ...

  2. Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信

    背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么 ...

  3. [转]Creating an Entity Framework Data Model for an ASP.NET MVC Application (1 of 10)

    本文转自:http://www.asp.net/mvc/overview/older-versions/getting-started-with-ef-5-using-mvc-4/creating-a ...

  4. Creating a new dynamic form project, business modeling.

    The domain logic is like there are a bunch of objects, as well as a lot of configurations, according ...

  5. [Flutter] Creating & Updating State in a Flutter Application

    To create a Stateful widget: 1. Create a StatefulWidget 2. Create a State class SGreeting extends St ...

  6. Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

    前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC ...

  7. 【Flutter 1-1】8个Flutter的优势以及为什么要在下一个项目中尝试Flutter

    首发链接 让我们一起来了解Flutter与其他跨平台框架的优势,以及这些优势在开发流程中的作用. Flutter是什么 Flutter的优势 1. 跨平台使用相同的UI和业务逻辑 2. 节省开发时间 ...

  8. Flutter 异常处理之图片篇

    背景 说到异常处理,你可能直接会认为不就是 try-catch 的事情,至于写一篇文章单独来说明吗? 如果你是这么想的,那么本篇说不定会给你惊喜哦~ 而且本篇聚焦在图片的异常处理. 场景 学以致用,有 ...

  9. Flutter的原理及美团的实践

    导读 Flutter是Google开发的一套全新的跨平台.开源UI框架,支持iOS.Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件.自从2017年5月发布第一个版本以来,目前 ...

随机推荐

  1. Java易错知识点(2) - 在读取Cookie时除了Key,Value是得不到其他信息的

    全文总结: 在读取Cookie,然后操作时,除了getName(),getValue()外,不要妄图得到其他信息,如下方法不会得到值的: cookie.getMaxAge(); cookie.getD ...

  2. 让button居中显示的的标签

    <center> <input type="button" class="buttoncls" style="width:80px& ...

  3. 多个springboot项目部署在同一tomcat上,出现jmx错误

    多个springboot项目部署在同一tomcat上,出现jmx错误 原因:因为jmx某些东西重复,禁用jmx就可以了 endpoints.jmx.unique-names=true

  4. django日志的设置

    关于django的日志设置详细可以看下官方文档:https://yiyibooks.cn/xx/Django_1.11.6/topics/logging.html 示例: # 日志文件配置 LOGGI ...

  5. Jstorm草草配置

    今天帮同事调试一个双节点的Jstorm测试集群. UI界面总是不能出现集群的具体信息. 参考几个URL调了一下.搞定了. 收获以下知识点: 1,UI是在storm.yaml里配置的 2,Jstorm分 ...

  6. [xampp] ubuntu终端连接xampp的mysql

    /opt/lampp/bin/mysql -u root

  7. 洛谷 P3383 【模板】线性筛素数-线性筛素数(欧拉筛素数)O(n)基础题贴个板子备忘

    P3383 [模板]线性筛素数 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输出格式 输入格式: 第一行包含两个正整数N.M,分别表示查询的范 ...

  8. POJ1861 Network(Kruskal)(并查集)

    Network Time Limit: 1000MS     Memory Limit: 30000K Total Submissions: 16047   Accepted: 6362   Spec ...

  9. [Hackerrank]时间转换Time Conversion

    题目链接 大致要求是说给定一个十二小时制的时间,给出它的二十四小时制的形式. 输入格式:hh:mm:ssAM 或者 hh:mm:ssPM,其中01≤hh≤12,00≤mm,ss≤59 思路 判断字符串 ...

  10. [BZOJ 3157] 国王奇遇记

    Link: BZOJ 3157 传送门 Solution: 题意:求解$\sum_{i=1}^n m^i \cdot {i^m}$ $O(m^2)$做法: 定义一个函数$f[i]$,$f[i]=\su ...