Flut 2
2. Explore various flutter widgets(Text,Image,and
container)
TEXT WIDGET:The Text widget in Flutter is used to
display a string of text on the screen.It is highly
customizable, allowing you to style and format text to suit
your design needs.
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(
home: Scaffold(
backgroundColor: Colors.orange,
appBar: AppBar(
backgroundColor: Colors.green,
title: Text("Text Widget"),
),
body: Center(
child: Text(
"A long text with multiple styles and properties in
flutter!",
style: TextStyle( fontSize: 20.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
letterSpacing: 1.5,
wordSpacing: 4.0,
color: Colors.blue,
backgroundColor: Colors.yellow,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.dashed,
height: 1.5,
fontFamily: 'Roboto',
),
),
),
),
);
}
} Container widget:
The container widget is a box that can contain other
widget. It acts as a wrapper around other widgets to apply size,
padding and margins, Background color or gradient, Borders
and shadows, Transformations (like rotation), Alignment.
The container widget can hold a single child widget, and it
provides a variety of properties to customize the visual
appearance, size, position, and behavior of that box. The container widget is mostly used for creating cards or
panels, styling buttons or labels, adding spacing and layout
control.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());}
class MyApp extends StatelessWidget{
Widget build(BuildContext context){
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Container Example")),
body:Container(
width: 400,
height: 200,
alignment:Alignment.center,
margin: EdgeInsets.all(70),
padding: EdgeInsets.all(30),
transform: Matrix4.rotationZ(-0.1),
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.black, width: 2),
boxShadow:[
BoxShadow(
color: Colors.black,
blurRadius: 8,
offset: Offset(2, 4),
),
], ),
child: Text(
"Hello ! I am inside a container!",
style: TextStyle(fontSize:20),
),
),
),
);
}
}
Comments
Post a Comment