当前位置:网站首页>Example of shutter text component
Example of shutter text component
2022-07-06 19:43:00 【Snow pine】
figure :
Entrance file :C:\Users\user\StudioProjects\myflutter\lib\main.dart
import 'package:flutter/material.dart';
import 'package:myflutter/basic/text.dart';
String mytitle = ' home page ';
void main(List<String> args) {
return runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 1. First , Program entry flutter Top level components of
return MaterialApp(
title: "hello myflatter", // Title Applied in task manager ;
// Theme styles for applications
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: my_flutter(title: mytitle), // The main content of the application
debugShowCheckedModeBanner: false // Whether the application displays the main upper corner debugging mark
);
}
}
// ignore: camel_case_types
class my_flutter extends StatelessWidget {
const my_flutter({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
// 2. secondly , Program entry flutter Scaffold components
return Scaffold(
// The head component of the application
appBar: AppBar(
// The middle header of the application
title: Text(title),
// leading It is the icon in the upper corner of the main
leading: IconButton(
onPressed: () {
print('This is home!');
},
icon: const Icon(Icons.view_headline),
),
// The icon group on the right side of the application header ( Multiple icons )
actions: [
// Icon 1
IconButton(
onPressed: () {
print('This is share!');
},
icon: const Icon(Icons.share),
),
// Icon 2
Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child: IconButton(
icon: const Icon(Icons.search),
onPressed: () {
print('This is search!');
},
),
),
// Icon 3
IconButton(
onPressed: () {
print('This is more!');
},
icon: const Icon(Icons.more_vert),
)
],
),
// 3. This is the main component entry of the entire application content !!
body: const text_demo(),
);
}
}
text Component example :C:\Users\dai51\StudioProjects\myflutter\lib\basic\text.dart
import 'package:flutter/material.dart';
/// Text
/// TestDirection( The text direction )
///
/// TextStyle( Text style )
/// Colors( text color )
/// FontWeight( The font size )
/// FontStyle( Font style )
///
/// TextAlign( Text alignment )
/// TextOverflow( Text overflow )
/// maxLines( Specify the number of lines to display )
///
/// RichText And TextSpan( Declare different styles for a piece of text )
///
class text_demo extends StatelessWidget {
const text_demo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
/// Column Example component , Multiple contents can be passed in ,
/// Use when transferring multiple contents children,child Only one content can be passed in .
return Column(
children: [
const Text(
"Flutter Bring innovation to application development : Just a code base , Can build 、 Testing and release are applicable to mobile phones 、Web、 Beautiful applications for desktop and embedded platforms .",
textDirection:
TextDirection.ltr, // The text direction :ltr yes left to right From left to right ;rtl From right to left
style: TextStyle(
fontSize: 30,
color: Colors.red,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
decoration: TextDecoration.lineThrough, // Text modification : Center line
decorationColor: Colors.blue,
),
textAlign: TextAlign.right,
maxLines: 3, // The maximum number of lines of text displayed
overflow: TextOverflow.ellipsis, // Text overflow shows three dots
textScaleFactor: 1.5, // Text magnification
),
// Multiline text component RichTixt amount to HTML Of <div></div> label
RichText(
// TextSpan amount to HTML Of <span></span> label
text: const TextSpan(
text: "hello",
style: TextStyle(
fontSize: 40,
color: Colors.deepOrange,
),
// children You can display multiple lines of text .
children: [
TextSpan(
text: "flutter",
style: TextStyle(
fontSize: 40,
color: Colors.blue,
)),
TextSpan(
text: " Hello world !",
style: TextStyle(
fontSize: 40,
color: Colors.blue,
)),
]),
),
],
);
}
}
Execution effect :
边栏推荐
- 1805. 字符串中不同整数的数目
- 腾讯T3大牛手把手教你,大厂内部资料
- 激进技术派 vs 项目保守派的微服务架构之争
- 蓝桥杯 微生物增殖 C语言
- 【pytorch】yolov5 训练自己的数据集
- 《数字经济全景白皮书》保险数字化篇 重磅发布
- Teach you to learn JS prototype and prototype chain hand in hand, a tutorial that monkeys can understand
- Druid database connection pool details
- JDBC详解
- Learning and Exploration - function anti shake
猜你喜欢
Live broadcast today | the 2022 Hongji ecological partnership conference of "Renji collaboration has come" is ready to go
思维导图+源代码+笔记+项目,字节跳动+京东+360+网易面试题整理
Mysql Information Schema 學習(一)--通用錶
Interview assault 63: how to remove duplication in MySQL?
时钟轮在 RPC 中的应用
Using clip path to draw irregular graphics
Understand yolov1 Part II non maximum suppression (NMS) in prediction stage
[translation] linkerd's adoption rate in Europe and North America exceeded istio, with an increase of 118% in 2021.
IC设计流程中需要使用到的文件
Hudi vs Delta vs Iceberg
随机推荐
LeetCode_ Double pointer_ Medium_ 61. rotating linked list
ZABBIX proxy server and ZABBIX SNMP monitoring
Using clip path to draw irregular graphics
凤凰架构2——访问远程服务
Hudi vs Delta vs Iceberg
Learning and Exploration - function anti shake
零基础入门PolarDB-X:搭建高可用系统并联动数据大屏
广州首个数据安全峰会将在白云区开幕
信息系统项目管理师---第八章 项目质量管理
swagger2报错Illegal DefaultValue null for parameter type integer
凤凰架构3——事务处理
Zero foundation entry polardb-x: build a highly available system and link the big data screen
【翻译】云原生观察能力微调查。普罗米修斯引领潮流,但要了解系统的健康状况仍有障碍...
Carte de réflexion + code source + notes + projet, saut d'octets + jd + 360 + tri des questions d'entrevue Netease
Leetcode 30. 串联所有单词的子串
10 schemes to ensure interface data security
Excel 中VBA脚本的简单应用
Recursive implementation of department tree
Translation D28 (with AC code POJ 26:the nearest number)
map的使用(列表的数据赋值到表单,json逗号隔开显示赋值)