Give Styling the container widgets in flutter and getting to know the container properties
Container widgets are one of the most basic widgets in Flutter and are very important in building UI for the applications that we create. Basically container widgets have several properties, that is : alignment, child, clipBehavior, color, constraints, decoration, foregroundDecoration, hashCode, key, margins, padding.
In this tutorial, we will try to style or organize a container with its properties so that the container becomes the UI we expect.
Table of contents:
- Create a new project
- Create containers
- Give the dimensions width, height
- Add text to the container
- Create a BoxDecoration and add the border, borderRadius, gradient and boxShadow properties
- Adding the transform property
-
Create a new Project in Flutter
Our first step is to create a new project, open VScode then select the Terminal-> New terminal menu then type the command “flutter create appcontainer” to create a new project with the name appcontainer.
Then enter the project with the command “cd appcontainer“, run our application by selecting the Run->start_debugging menu, if there are no errors it will appear like this image
2. Create a container in Flutter
Open the main.dart file in the lib folder then delete all the code and fill it with the code below
import 'package:flutter/material.dart';
void main() {
runApp(const FirstApp());
}
class FirstApp extends StatelessWidget {
const FirstApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Container"),
),
body: Center(
child: Container(
)));
}
}If the above code is executed, a blank page will appear because the body in the container section is still empty
3. Give the dimensions width, height
//we give width 200
width: 200,
//we give height 200
height: 200,
4. Add text to the container
We can also add text inside the container, add the following code
margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
child: Center(
child: const Text(
'THIS IS CONTAINER',
style: TextStyle(color: Colors.black),
)),5. Create a BoxDecoration and add the border, borderRadius, gradient and boxShadow properties
after that we will give a border to the container above, to add a border we have to use the container property whose name is “decoration” so the code is like this:
decoration: BoxDecoration(
color: Color.fromARGB(255, 9, 248, 1),
border: Border.all(
color: Color.fromARGB(255, 233, 1, 183),
width: 2.0,
),
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(colors: [
Color.fromARGB(255, 42, 238, 117),
Color.fromARGB(255, 0, 156, 13)
]),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
offset: Offset(6.0, 6.0)),
])The compleate code is
import 'package:flutter/material.dart';
void main() {
runApp(const FirstApp());
}
class FirstApp extends StatelessWidget {
const FirstApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Container"),
),
body: Center(
child: Container(
//kita memberi width sebesar 200
width: 200,
//kita memberi height sebesar 200
height: 200,
margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
child: Center(
child: const Text(
'THIS IS CONTAINER',
style: TextStyle(color: Colors.black),
)),
decoration: BoxDecoration(
color: Color.fromARGB(255, 9, 248, 1),
border: Border.all(
color: Color.fromARGB(255, 233, 1, 183),
width: 2.0,
),
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(colors: [
Color.fromARGB(255, 42, 238, 117),
Color.fromARGB(255, 0, 156, 13)
]),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
offset: Offset(2.0, 2.0)),
]))));
}
}NOTE : We can see in the code above that the decoration property wraps the border, borderRadius, gradient and boxShadow properties, if it is not wrapped in decoration it will definitely cause an error, so it must be wrapped in the decoration property, OK…
if you use VScode editor so you can immediately run the project we just created by selecting the menu Run->start_debugging if no error will appear like this picture
6. Add transform property
The Transform property functions to rotate the container to the coordinates we want.
Use it like this: transform: Matrix4.rotationZ(0.1),
so the complete code is like this
import 'package:flutter/material.dart';
void main() {
runApp(const FirstApp());
}
class FirstApp extends StatelessWidget {
const FirstApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Container"),
),
body: Center(
child: Container(
//kita memberi width sebesar 200
width: 200,
//kita memberi height sebesar 200
height: 200,
margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
transform: Matrix4.rotationZ(0.1),
child: Center(
child: const Text(
'THIS IS CONTAINER',
style: TextStyle(color: Colors.black),
)),
decoration: BoxDecoration(
color: Color.fromARGB(255, 9, 248, 1),
border: Border.all(
color: Color.fromARGB(255, 233, 1, 183),
width: 2.0,
),
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(colors: [
Color.fromARGB(255, 42, 238, 117),
Color.fromARGB(255, 0, 156, 13)
]),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
offset: Offset(6.0, 6.0)),
]))));
}
}If You running the code and success the result like the images below
ok, that is the tutorial, thx u