[Flutter] Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application
2023-09-14 09:00:49 时间
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: 300, height: 300, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(500) ), 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: 32 ) ); } }
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: 300, height: 300, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(500) ), child: Greeting(greeting: "Hey you!", color: Colors.blue) ) ], ) ) ), ); } }
相关文章
- diff ->> acl & prefix list
- MongoDB备份数据库&导入数据库
- [Flutter] Creating & Updating State in a Flutter Application
- UIEvent UIResponder UI_04
- Dijkstra's Algorithm
- 华为OD机试 - 用户调度问题(Java & JS & Python)
- DL之RNN:基于TF利用RNN实现简单的序列数据类型(DIY序列数据集)的二分类(线性序列&随机序列)
- VB编程:全局变量&控件数组实例简单计算器-12_彭世瑜_新浪博客
- access数据库:怎么直接从access里把数据里同样的文字替换成空字符""
- 71:内网安全-域横向网络&传输&应用层隧道技术——端口转发本质上是属于传输层的隧道
- 技术报告:APT组织Wekby利用DNS请求作为C&C设施,攻击美国秘密机构
- Chapter5 ROS常用组件(Ⅱ)----rosbag&rqt工具箱
- k8s 存储卷之 PV & PVC
- 【线代&NumPy】第十三章 - 矩阵对角化课后练习 | 特征值分解 | 散布矩阵 | 降维方法LDA | 简述并提供代码