Shulou(Shulou.com)06/02 Report--

This article mainly introduces "Flutter how to achieve Text perfect encapsulation". In daily operation, I believe many people have doubts about how to achieve Text perfect encapsulation in Flutter. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to achieve Text perfect encapsulation in Flutter". Next, please follow the editor to study!

Accustomed to using the layout of android, I simply abhor the components and layout of Flutter, so I made up my mind to encapsulate the basic components of Flutter a little bit. What I encapsulated today is Text components. I think the encapsulation is very perfect. I can write Text in the way of android layout, and I can directly set margin,padding,color,font, and all the properties, such as margin,padding,color,font, etc., can be realized with only one line of code. Don't say much nonsense, let's see the effect first.

We can see that the color, border, fillet are all set, and other properties are not shown one by one, what code is needed to achieve this effect? Look down there.

TextView ("Custom textview", backgroundColor: Colors.red, textColor: Colors.white, padding: 10, cornerRadius: 10, borderColor: Colors.yellow, borderWidth: 1, marginTop: 5, singleLine: false,)

Yes, it's exactly the same as android layout, no more nesting container, no more style!

The specific encapsulation entity classes are as follows. In memory of android, I call him TextView. The specific attribute reference code should be very simple and easy to understand.

Import 'package:flutter/material.dart'; class TextView extends StatelessWidget {double? Padding = 0; double? Margin = 0; double? PaddingLeft = 0; double? PaddingRight = 0; double? PaddingTop = 0; double? PaddingBottom = 0; double? MarginLeft = 0; double? MarginRight = 0; double? MarginTop = 0; double? MarginBottom = 0; double? FontSize = 0; Color? TextColor = Colors.black; Color? BackgroundColor = Colors.white; AlignmentGeometry? Alignment = Alignment.center; double? CornerRadius = 0; double? BorderWidth = 0; Color? BorderColor = Colors.white; String content = ""; bool? SingleLine = false; bool? IsBold = false TextView (this.content, {this.textColor, this.backgroundColor, this.padding, this.paddingTop, this.paddingBottom, this.paddingRight, this.paddingLeft, this.cornerRadius, this.borderColor, this.borderWidth, this.marginBottom, this.marginLeft, this.marginRight, this.marginTop, this.margin, this.fontSize, this.singleLine This.isBold}) {if (padding! = null) {if (padding! = null & & padding! > 0) {paddingLeft = padding PaddingRight = padding; paddingBottom = padding; paddingTop = padding;}} if (margin! = null) {if (margin! = null & & margin! > 0) {marginLeft = margin; marginTop = margin; marginRight = margin; marginBottom = margin } @ override Widget build (BuildContext context) {return Container (margin: EdgeInsets.fromLTRB (this.marginLeft? 0, this.marginTop? 0, this.marginRight? 0, this.marginBottom? 0), decoration: new BoxDecoration (border: new Border.all (width: this.borderWidth? 0, color: this.borderColor?? Colors.white), color: this.backgroundColor, borderRadius: new BorderRadius.all (new Radius.circular (this.cornerRadius? 0),), padding: EdgeInsets.fromLTRB (this.paddingLeft? 0, this.paddingTop? 0, this.paddingRight? 0, this.paddingBottom? 0), child: Text (content, style: TextStyle (color: this.textColor) FontSize: this.fontSize?? 14, fontWeight: this.isBold?? False? FontWeight.bold: FontWeight.normal, overflow: this.singleLine?? False? TextOverflow.ellipsis: TextOverflow.clip),),}} at this point, the study on "how to achieve the perfect encapsulation of Text by Flutter" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.