In Flutter, the basic structure of UI design revolves around creating a widget tree. Each widget represents a visual element or component of the user interface. Here's a breakdown of the basic structure along with some sample code:
### 1. **MaterialApp**:
This is the root widget of your application. It sets up the overall structure of your app and provides features like navigation and theming.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Text("Hi"),
));
}
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
```
### 2. **Scaffold**:
This widget provides a basic layout structure for your app, including app bar, drawer, and body.
```dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Container(
child: Center(
child: Text('Hello, World!'),
),
),
);
}
}
```
### 3. **AppBar**:
This widget represents the app bar at the top of the screen.
```dart
appBar: AppBar(
title: Text('My App'),
),
```
### 4. **Container**:
This widget is used to create a rectangular visual element with customizable properties like color, padding, margin, etc.
```dart
body: Container(
color: Colors.blue,
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
child: Center(
child: Text('Hello, World!', style: TextStyle(color: Colors.white)),
),
),
```
### 5. **Center**:
This widget centers its child within itself.
```dart
child: Center(
child: Text('Hello, World!'),
),
```
### Putting It All Together:
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Container(
color: Colors.blue,
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
child: Center(
child: Text('Hello, World!', style: TextStyle(color: Colors.white)),
),
),
);
}
}
```
### Explanation:
- The `MaterialApp` widget sets up the overall structure of the app.
- The `Scaffold` widget provides a basic layout structure with an app bar and body.
- Within the body, we use a `Container` widget to create a colored box with padding and margin.
- Inside the `Container`, we use a `Center` widget to center the text widget vertically and horizontally.
- Finally, we use a `Text` widget to display the "Hello, World!" text with white color.
This basic structure can be expanded and customized further by adding more widgets and styling properties according to your app's requirements.
The `Text` widget in Flutter is used to display text on the screen. It allows you to customize various aspects of the text, such as its content, style, alignment, and more. Let's delve into the `Text` widget and its styling in detail with sample code:
### Text Widget
The `Text` widget is used to display a single line of text. It accepts a `String` parameter as its `data` property to specify the text content.
```dart
Text(
'Hello, World!',
)
```
### Text Styling
You can customize the appearance of the text using the `style` property of the `Text` widget. The `style` property takes a `TextStyle` object, which allows you to define various text styling properties such as `color`, `fontFamily`, `fontSize`, `fontWeight`, `fontStyle`, `letterSpacing`, `wordSpacing`, `textDecoration`, and `textAlign`.
```dart
Text(
'Hello, World!',
style: TextStyle(
color: Colors.blue,
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
letterSpacing: 1.5,
wordSpacing: 2.0,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.dotted,
textAlign: TextAlign.center,
fontFamily: 'Roboto',
),
)
```
### Example: Combining Text and Styling
```dart
Text(
'Hello, World!',
style: TextStyle(
color: Colors.blue,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
)
```
### Explanation:
- The `Text` widget displays the text "Hello, World!".
- The `style` property applies various styling properties to the text:
- `color`: Sets the color of the text to blue.
- `fontSize`: Sets the font size to 20.0.
- `fontWeight`: Sets the font weight to bold.
### Custom Fonts
You can also use custom fonts in your Flutter app by specifying the `fontFamily` property in the `TextStyle` object and loading the font files in your project.
```dart
Text(
'Hello, World!',
style: TextStyle(
fontFamily: 'Roboto',
),
)
```
### Conclusion
The `Text` widget in Flutter is a versatile widget for displaying text on the screen. By using the `style` property, you can customize the appearance of the text to suit your app's design requirements. Whether you need simple text or elaborate typography, the `Text` widget provides the flexibility and customization options you need to create visually appealing UIs in your Flutter app.
Contact us for software training, education or development
.png)
0 Comments