Column, Padding, Container ,Sateless
class ContainerExample extends StatelessWidget {
const ContainerExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container Example'),backgroundColor: Colors.orange,),
body:Padding(padding: EdgeInsets.all(10.0),
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment : CrossAxisAlignment.start,
children: [
Container(height: 100,width: 100,color: Colors.red,),
SizedBox(height: 5,),
Container(height: 100,width: 100,color: Colors.blue,),
SizedBox(height: 5,),
Container(height: 100,width: 100,
decoration: BoxDecoration(
color: Colors.purple,
shape: BoxShape.circle
),
),
],
),
); } }
SINGLE SCROLL CHILD VIEW
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// getRowView()
SingleChildScrollView(
scrollDirection: Axis.horizontal, // Row
// scrollDirection: Axis.vertical, // not working for column
child: Row(
children: [
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
width: 5,
),
Container(
height: 100,
width: 100,
color: Colors.orange,
),
],
)
CheckBox
bool chkbx1State = false; // Global Variable
bool chkbx2State = false;
Approch 1 :
Checkbox(
value: chkbx1State,
onChanged: (bool? val) {
setState(() {
chkbx1State = val!;
});
}),
GestureDetector(
onTap: () {
setState(() {
chkbx1State = !chkbx1State;
});
},
child: Text('Checkbox 1'))
Approach 2 :
CheckboxListTile(
controlAffinity: ListTileControlAffinity.leading,
//controlAffinity: ListTileControlAffinity.trailing,
title: Text('Check Box 2'),
value: chkbx2State,
onChanged: (bool? val) {
setState(() {
chkbx2State = val!;
});
})
Approch 3:
Row(
children: [
Checkbox(value: chkbxHock, onChanged: (val){
setState(() {
chkbxHock=val!;
});
}),
Text('Hockey')
],
ELEVATED BUTTON
ElevatedButton(onPressed: (){
int qty=int.parse(quantitycontroller.text);
int price=int.parse(pricecontroller.text);
int bill=qty*price;
reciept='Amount\t{$bill}\nDiscount\t${discount}\nMembership\t${memberShipDiscount}\nPay
bale\t${payable}';
print(reciept);
setState(() {
billcontroller.text = bill.toString();
});
}, child:Text('Calculate')),
Text Foam Field
TextEditingController quantitycontroller=TextEditingController(); // Global
quantitycontroller.text="0"; //Set Value ;
int qty=int.parse(quantitycontroller.text);//Get
Container(
width: 100,
height: 60,
child: TextFormField(
readOnly: true,
controller: quantitycontroller,
//keyboardType:TextInputType.numbers, // For Numaric Keyboard
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Quantity',
labelText: 'Qunatity',
prefixIcon: Icon(Icons.person)),
),//InputDecorator
),//TextFormField )//Container
Text
Text('Counter ${_counter}',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),
Image
Image.asset(
'assets/logo.png',
width: 150.0,
height: 200.0,
fit: BoxFit.cover,
),
Radio Button
String ?gender; // Same Variable is used For Grouping Multiple Radio button
Row(children: [
Radio(value: "Male",
groupValue: gender,
onChanged: (String? val){
setState(() {
gender=val;
});
}),
Text('Male')
],),
Row(children: [
Radio(value: "Female",
groupValue: gender,
onChanged: (String? val){
setState(() {
gender=val;
});
}),
Text('Female') ],),
DROPDOWN BUTTON
List<int> AgeList = [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 ];
String? _selectedage;
Row(
children: [
Text("Age"),
Container(
height: 60,
width: 150,
child: DropdownButton(
isExpanded: true,
value: _selectedage,
items: AgeList.map((e) {
return DropdownMenuItem<String>(
value: e.toString(), child: Text(e.toString()));
}).toList(),
onChanged: (selectedItem) {
setState(() {
_selectedage = selectedItem;
});
})),
],
List View Builder and DropDown
Text('City'),
Container(height: 60,width: 150,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(5)
),
child: DropdownButton(
isExpanded: true,
value: _city,
items:cities_list.map((e){
return DropdownMenuItem<String>(
value: e,
child: Text(e));
}).toList(),
onChanged: (String? _selectedItem){
setState(() {
_city=_selectedItem;
filterDoctors();
});
},
),
),
Expanded(child: Container(
child: ListView.builder(
itemCount: searchedlist.length ,
itemBuilder: (context,index){
Doctor doctor=doctorlist[index];
return Container(height: 70,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(4)
),
child: Card(
elevation: 3,// For Shadow
child: Column(
children: [
Text('Name ${doctor.name}'),
Text('Experience ${doctor.experience}'),
Text('Specailization ${doctor.spec}')
],
),
),
);
}),
))
List View(Column Scroll)
body: ListView(
// scrollDirection: Axis.horizontal,
children: [
Container(
margin: EdgeInsets.all(10),
height: 100,
width: 100,
color: Colors.orange,
),
Container(
margin: EdgeInsets.all(10),
height: 100,
width: 100,
color: Colors.blue,
),
Container(
margin: EdgeInsets.all(10),
height: 100,
width: 100,
color: Colors.orange,
),
Container(
margin: EdgeInsets.all(10),
height: 100,
width: 100,
color: Colors.blue,
),
List View Builder
body: ListView.builder(
itemCount: 100,
itemBuilder: (BuildContext context ,int index){
return Text('S# ${index +1}',style: TextStyle(fontSize: 20),);
}),
LIST View Builder with Tile (Delete icon)
body: ListView.builder(
itemCount: slist.length,
itemBuilder: (context,index){
Student sobj=slist[index];
return ListTile(
onTap: (){
},
title: Text('Name ${sobj.name}'),
subtitle: Text('Semester${sobj.semester}'),
trailing: IconButton(icon: Icon(Icons.delete),onPressed: (){
setState(() {
slist.removeAt(index);
});
},),
);
}),
NAVIGATION on Button
ElevatedButton(onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context){
return SearchScreen(); // Screen To Call
);
}, child: Text('Search Doctor')),
ADD ON BUTTON
ElevatedButton(onPressed: (){
Doctor doctor=Doctor(city: _city!,
experience:int.parse(experiencecontroller.text),
name: namecontroller.text,
spec: _special!);
doctor_list.add(doctor);
}, child: Text('Add'))
