Share the getting started Guide to Flutter 04/18 Update SLTechnology News&Howtos

Share the getting started Guide to Flutter

2025-04-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

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

This article mainly explains the "sharing Flutter getting started Guide". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "sharing Flutter getting started Guide".

I. basic layout

Let's first take a look at some of the most common UI layout operations.

1.1 text style and alignment

The font style, size, and other text properties we set in CSS are separate attributes in TextStyle, a Text widget child element in Flutter.

In both HTML and Flutter, child elements or widgets are anchored at the top left, by default.

Whether it is HTML or Flutter, child elements or widget are anchored at the top left by default.

Web

Lorem ipsum .greybox {background-color: # e0e0e0; / * grey 300 * / width: 320px; height: 240px; font: 90024px Georgia;}

Dart

Var container = Container (/ / grey box child: Text ("Lorem ipsum", style: TextStyle (fontSize: 24.0, fontWeight: FontWeight.w900, fontFamily: "Georgia",), width: 320.0, height: 240.0, color: Colors.grey

1.2 background Color

In Flutter, you can set the background color through the decoration property of Container.

We use the equivalent hexadecimal color representation in the CSS example.

Web

Lorem ipsum .greybox {background-color: # e0e0e0; / * grey 300 * / width: 320px; height: 240px; font: 90024px Roboto;}

Dart

Var container = Container (/ / grey box child: Text ("Lorem ipsum", style: bold24Roboto,), width: 320.0, height: 240.0, color: Colors.grey

1.3 Center element

In Flutter, Center widget can center its child elements horizontally and vertically.

To achieve a similar effect with CSS, the parent element needs to use a flex or table-cell display layout. The examples in this section use the flex layout.

Web

Lorem ipsum .greybox {background-color: # e0e0e0; / * grey 300 * / width: 320px; height: 240px; font: 90024px Roboto; display: flex; align-items: center; justify-content: center;}

Dart

Var container = Container (/ / grey box child: Center (child: Text ("Lorem ipsum", style: bold24Roboto,), width: 320.0, height: 240.0, color: Colors.grey [300],)

1.4 set container width

The width of Container widget can be specified with its width attribute, but it is important to note that unlike the max-width attribute in CSS, which is used to specify a container-adjustable width value, a fixed width is specified here. To simulate the effect of max-width in Flutter, you can use the constraints property of Container. Create a new BoxConstraints widget with minWidth and maxWidth attributes. For a nested Container, if the width of the parent element is less than the width of the child element, the actual size of the child element is based on the parent element size.

Web

Lorem ipsum .greybox {background-color: # e0e0e0; / * grey 300 * / width: 320px; height: 240px; font: 90024px Roboto; display: flex; align-items: center; justify-content: center;} .redbox {background-color: # ef5350; / * red 400 * / padding: 16px; color: # ffffff; width: 100%; max-width: 240px;}

Dart

Location and size

The following example shows how to perform more complex operations on the location, size, and background of the widget.

2.1 absolute positioning

By default, the widget is positioned relative to its parent element. To specify the absolute location of a widget through the XMury coordinates, nest it in a Positioned widget, and the widget needs to be nested in a Stack widget.

Web

Lorem ipsum .greybox {background-color: # e0e0e0; / * grey 300 * / width: 320px; height: 240px; font: 900 24px Roboto; position: relative;} .redbox {background-color: # ef5350; / * red 400 * / padding: 16px; color: # ffffff; position: absolute; top: 24px; left: 24px;}

Dart

Var container = Container (/ / grey box child: Stack (children: [Positioned (/ / red box child: Container (child: Text ("Lorem ipsum", style: bold24Roboto,), decoration: BoxDecoration (color: Colors.red,), padding: EdgeInsets.all ), left: 24.0, top: 24.0,],), width: 320.0, height: 240.0, color: Colors.grey [240.0],)

2.2 rotation

To rotate a widget, nest it in the Transform widget. Where the alignment and origin attributes of Transform widget are used to specify the specific location information of the conversion origin, respectively.

For simple 2D rotation, widget rotates on the Z axis according to radians. (angle × π / 180)

Web

Dart

Var container = Container (/ / gray box child: Center (child: Transform (child: Container (/ / red box child: Text ("Lorem ipsum", style: bold24Roboto, textAlign: TextAlign.center,), decoration: BoxDecoration (color: Colors.red,), padding: EdgeInsets.all Alignment: Alignment.center, transform: Matrix4.identity ().. rotateZ (15 * 3.1415927 / 3.1415927),), width: 320.0, height: 240.0, color: Colors.grey

2.3 scale element

Scaling can be achieved by nesting elements in a Transform widget. Use the alignment and origin properties of Transform widget to specify the specific location information of the scale origin, respectively.

For a simple zoom operation along the x-axis, create a new Matrix4 identity object and use its scale () method to specify the scaling factor.

When you scale a parent widget, its child widget is scaled accordingly.

Web

Dart

Var container = Container (/ / gray box child: Center (child: Transform (child: Container (/ / red box child: Text ("Lorem ipsum", style: bold24Roboto, textAlign: TextAlign.center,), decoration: BoxDecoration (color: Colors.red,), padding: EdgeInsets.all Alignment: Alignment.center, transform: Matrix4.identity (). Scale, width: 320.0, height: 240.0, color: Colors.grey [320.0],)

2.4 Linear transformation

By nesting elements in a Container widget, you can apply linear transformations to the background of the widget. After that, a BoxDecoration object is generated with the decoration property of Container widget, and then the background fill is transformed using the gradient property of BoxDecoration.

The transformation "angle" is determined based on the value of Alignment (x, y):

If the start and end x values are the same, the transformation will be vertical (0 °180 °).

If the start and end y values are the same, the transformation will be horizontal (90 °270 °).

Here, only the code differences of vertical transformations are shown:

Web

Lorem ipsum .greybox {background-color: # e0e0e0; / * grey 300 * / width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center;} .redbox {padding: 16px; color: # ffffff; background: linear-gradient (180deg, # ef5350, rgba (0,0,0,0) 80%);}

Dart

Var container = Container (/ / grey box child: Center (child: Container (/ / red box child: Text ("Lorem ipsum", style: bold24Roboto,), decoration: BoxDecoration (gradient: LinearGradient (begin: const Alignment (0.0,1.0), end: const Alignment (0.0,0.6) Colors: [const Color (0xffef5350), const Color (0x00ef5350)],),), padding: EdgeInsets.all (16.0),), width: 320.0, height: 240.0, color: Colors.grey

3. Figure / shape

The following example shows how to create and customize a drawing.

3.1 fillet

To fillet on a rectangle, you can use the borderRadius property of the BoxDecoration object. Create a new BorderRadius object to specify the radius size of each fillet.

Web

Lorem ipsum .greybox {background-color: # e0e0e0; / * gray 300 * / width: 320px; height: 240px; font: 90024px Roboto; display: flex; align-items: center; justify-content: center;} .redbox {background-color: # ef5350; / * red 400 * / padding: 16px; color: # ffffff; border-radius: 8px;}

Dart

Var container = Container (/ / grey box child: Center (child: Container (/ / red circle child: Text ("Lorem ipsum", style: bold24Roboto,), decoration: BoxDecoration (color: Colors.red, borderRadius: BorderRadius.all (const Radius.circular), padding: EdgeInsets.all (16.0) ), width: 320.0, height: 240.0, color: Colors.grey

3.2 Shadow

In CSS, you can quickly specify the shadow offset and blur range through the box-shadow property. For example, the property settings of the following two box shadows:

XOffset: 0px, yOffset: 2px, blur: 4px, color: black @ 80% alpha

XOffset: 0px, yOffset: 06x, blur: 20px, color: black @ 50% alpha

In Flutter, each attribute and its value are specified separately. Use the boxShadow property of BoxDecoration to generate a series of BoxShadow widget. You can define one or more BoxShadow widget, which are used together to set the shadow depth, color, and so on.

Web

Dart

Var container = Container (/ / grey box child: Center (child: Container (/ / red box child: Text ("Lorem ipsum", style: bold24Roboto,), decoration: BoxDecoration (color: Colors.red, boxShadow: [BoxShadow (color: const Color (0xcc000000), offset: Offset (0.0,2.0)) BlurRadius: 4. 0,), BoxShadow (color: const Color (0x80000000), offset: Offset (0.0,6.0), blurRadius: 20.0,),], padding: EdgeInsets.all (16.0),), width: 320.0, height: 240.0 Decoration: BoxDecoration (color: Colors.grey [300],), margin: EdgeInsets.only (bottom: 16.0)

3.3 circles and ellipses

Although there is a base figure in CSS, a workaround for generating circles in CSS is to set the border-radius on all four sides of the rectangle to 50%.

Although the borderRadius property of BoxDecoration supports this setting, Flutter provides a shape property for BoxShape enum for the same purpose.

Web

Lorem ipsum .greybox {background-color: # e0e0e0; / * gray 300 * / width: 320px; height: 240px; font: 90024px Roboto; display: flex; align-items: center; justify-content: center;} .redbread {background-color: # ef5350; / * red 400 * / padding: 16px; color: # ffffff; text-align: center; width: 160px; height: 160px; border-radius: 50%;}

Dart

Var container = Container (/ / grey box child: Center (child: Container (/ / red circle child: Text ("Lorem ipsum", style: bold24Roboto, textAlign: TextAlign.center,), decoration: BoxDecoration (color: Colors.red, shape: BoxShape.circle,), padding: EdgeInsets.all, width: 160.0 Height: 160.0,), width: 320.0, height: 240.0, color: Colors.grey

IV. Text

The following example shows how to set fonts and other text properties, including, among other things, how to transform text characters, customize spacing, and generate excerpts.

4.1 text spacing

In CSS, you can specify the space between each letter and each word by assigning values to the length of the letter-spacing and word-spacing attributes, respectively. The units of distance can be px, pt, cm, em and so on.

In Flutter, you can set the spacing to logical pixels (negative values are allowed) in the letterSpacing and wordSpacing attributes of the Text widget child element TextStyle.

Web

Dart

Var container = Container (/ / grey box child: Center (child: Container (/ / red box child: Text ("Lorem ipsum", style: TextStyle (color: Colors.white, fontSize: 24.0, fontWeight: FontWeight.w900, letterSpacing: 4.0,), decoration: BoxDecoration (color: Colors.red ), padding: EdgeInsets.all,), width: 320.0, height: 240.0, color: Colors.grey

4.2 inline style

A Text widget can display text of the same style. To display text in multiple styles, you need to use RichText widget instead. Its text property can specify one or more TextSpan widget that can be styled individually.

In the following example, "Lorem" is located in TextSpan widget and has a default (inherited from its parent element) text style, and "ipsum" is located in a separate TextSpan with custom styles.

Web

Dart

Var container = Container (/ / grey box child: Center (child: Container (/ / red box child: RichText (text: TextSpan (style: bold24Roboto, children: [TextSpan (text: "Lorem"), TextSpan (text: "ipsum", style: TextStyle (fontWeight: FontWeight.w300) FontStyle: FontStyle.italic, fontSize: 48.0,),],), decoration: BoxDecoration (backgroundColor: Colors.red,), padding: EdgeInsets.all,), width: 320.0, height: 240.0 Color: Colors.grey [300]

4.3 text summary

In Web, we often use ellipses to deal with overflowed text content, and in HTML/CSS, the summary cannot exceed one line. If you want to truncate after multiple lines, you will need the help of JavaScript.

In Flutter, use the maxLines attribute of Text widget to specify the number of rows contained in the feed, and the overflow attribute to handle the overflow text.

Web

Lorem ipsum dolor sit amet, consec etur .greybox {background-color: # e0e0e0; / * grey 300 * / width: 320px; height: 240px; font: 90024px Roboto; display: flex; align-items: center; justify-content: center;} .redbox {background-color: # ef5350; / * red 400 * / padding: 16px; color: # ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

Dart

Var container = Container (/ / grey box child: Center (child: Container (/ / red box child: Text ("Lorem ipsum dolor sit amet, consec etur", style: bold24Roboto, overflow: TextOverflow.ellipsis, maxLines: 1,), decoration: BoxDecoration (backgroundColor: Colors.red,), padding: EdgeInsets.all Width: 320.0, height: 240.0, color: Colors.grey Thank you for reading, the above is the content of "sharing Flutter getting started Guide", after the study of this article, I believe you have a deeper understanding of the issue of sharing Flutter getting started Guide, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.