අද අපි කතා කරන්න යන්නේ  Container class එක ගැන…

අද අපි කතා කරන්න යන්නේ Container class එක ගැන…

 Container class යනු විජට් වල පොදු පින්තාරු කිරීම, ස්ථානගත කිරීම සහ ප්‍රමාණයන් ඒකාබද්ධ කරන පහසු විජට් එකකි.

flutter හි බහාලුම් පන්තිය යනු විජට් වල පොදු පින්තාරු කිරීම, ස්ථානගත කිරීම සහ ප්‍රමාණයන් ඒකාබද්ධ කරන පහසු විජට් එකකි. විජට් එකක් හෝ කිහිපයක් ගබඩා කර අපගේ පහසුව අනුව තිරය මත ස්ථානගත කිරීමට බහාලුම් පන්තියක් භාවිතා කළ හැක. මූලික වශයෙන්, බහාලුමක් යනු අන්තර්ගතය ගබඩා කිරීමට පෙට්ටියක් වැනි ය. විජට් එකක් ගබඩා කරන මූලික බහාලුම් මූලද්‍රව්‍යයකට ආන්තිකයක් ඇත, එය වත්මන් බහාලුම අනෙකුත් අන්තර්ගතයන්ගෙන් වෙන් කරයි. සම්පූර්ණ කන්ටේනරයට විවිධ හැඩයන්ගෙන් යුත් මායිමක් ලබා දිය හැකිය, උදාහරණයක් ලෙස, වටකුරු සෘජුකෝණාස්‍ර, යනාදිය. කන්ටේනරයක් එහි දරුවා පිරවුමකින් වට කර ඇති අතර පසුව පිරවුම් ප්‍රමාණයට අමතර සීමාවන් යොදයි.

Syntax: 

Container({Key key,

           AlignmentGeometry alignment, 

           EdgeInsetsGeometry padding, 

           Color color, 

           Decoration decoration, 

           Decoration foregroundDecoration, 

           double width, 

           double height, 

           BoxConstraints constraints, 

           EdgeInsetsGeometry margin, 

           Matrix4 transform, 

           Widget child, 

           Clip clipBehavior: Clip.none});

 

Properties of Container Class:

1. child:  Container widget has a property ‘child:’ which stores its children. The child class can be any widget. Let us take an example, taking a text widget as a child. 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text("Container example"),

),

body: Container(

child:const Text(“Apps Lanka Dev",

style: TextStyle(fontSize: 20)),

),

),

);

}

}

 

2. color:  The color property sets the background color of the entire container. Now we can visualize the position of the container using a background color. 

 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
    return MaterialApp(
        home
        : Scaffold(appBar
                : AppBar(title
                            : const Text("Container example"),
                        ),
                    body
                : Container(color
                            : Colors.purple,
                            child
                            : const Text("Apps Lanka Dev",
                                    style
                                    : TextStyle(fontSize : 20)),
                            ),
                ),
    );
}
}

 

 

3. height and width: By default, a container class takes the space that is required by the child. We can also specify the height and width of the container based on our requirements.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text("Container example"),

),

body: Container(

height: 200,

width: double.infinity,

color: Colors.purple,

child: const Text("Apps Lanka Dev",

style: TextStyle(fontSize: 20)),

),

),

);

}

}

 

4. margin: The margin is used to create an empty space around the container. Observe the white space around the container. Here EdgeInsets.geometry is used to set the margin .all() indicates that the margin is present in all four directions equally.

 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text("Container example"),

),

body: Container(

height: 200,

width: double.infinity,

color: Colors.purple,

margin: const EdgeInsets.all(20),

child: const Text("Apps Lanka Dev",

style: TextStyle(fontSize: 20)),

),

),

);

}

}

 

5. padding: The padding is used to give space form the border of the container from its children. Observe the space between the border and the text.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text("Container example"),

),

body: Container(

height: 200,

width: double.infinity,

color: Colors.purple,

margin: const EdgeInsets.all(20),

padding: const EdgeInsets.all(30),

child: const Text("Apps Lanka Dev",

style: TextStyle(fontSize: 20)),

),

),

);

}

}

 

6. alignment: The alignment is used to position the child within the container. We can align in different ways: bottom, bottom center, left, right, etc. here the child is aligned to the bottom center.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text("Container example"),

),

body: Container(

height: 200,

width: double.infinity,

color: Colors.purple,

alignment: Alignment.bottomCenter,

margin: const EdgeInsets.all(20),

padding: const EdgeInsets.all(30),

child: const Text("Apps Lanka Dev",

style: TextStyle(fontSize: 20)),

),

),

);

}

}

 

7. decoration: The decoration property is used to decorate the box(e.g. give a border). This paints behind the child. Whereas foregroundDecoration paints in front of a child. Let us give a border to the container. But, both color and border color cannot be given.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text("Container example"),

),

body: Container(

height: 200,

width: double.infinity,

//color: Colors.purple,

alignment: Alignment.center,

margin: const EdgeInsets.all(20),

padding: const EdgeInsets.all(30),

decoration: BoxDecoration(

border: Border.all(color: Colors.black, width: 3),

),

child: const Text("Apps Lanka Dev",

style: TextStyle(fontSize: 20)),

),

),

);

}

}

 


 We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk

0 Comments

Leave a comment

Your email address will not be published. Required fields are marked *