Scribd
Upload
7 views8 pages

Exp 6 (A)

Uploaded by

kakkarjahnvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views8 pages

Exp 6 (A)

Uploaded by

kakkarjahnvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

EXPERIMENT :6.

a)

AIM: Create custom widgets for specific UI elements.

Custom Widgets
Program:

Step1: Main program

// lib/main.dart

import 'package:flutter/material.dart';

import 'widgets/custom_title.dart';

import 'widgets/custom_button.dart';

import 'widgets/labeled_icon.dart';

void main() {

runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: Text('Custom Widgets Example')),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,
children: [

CustomTitle(text: 'Welcome!'),

SizedBox(height: 20),

LabeledIcon(

icon: Icons.star,

label: 'Favorite Item',

),

SizedBox(height: 20),

CustomButton(

label: 'Click Me',

onPressed: () {

// Perform any action here

print("Button pressed!");

},

),

],

),

),

),

);

Step 2: Lib->Widgets -> Custom_button.dart

Program:

// lib/widgets/custom_button.dart

import 'package:flutter/material.dart';
class CustomButton extends StatelessWidget {

final String label;

final VoidCallback onPressed;

const CustomButton({

Key? key,

required this.label,

required this.onPressed,

}) : super(key: key);

@override

Widget build(BuildContext context) {

return ElevatedButton(

onPressed: onPressed,

style: ElevatedButton.styleFrom(

padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),

backgroundColor: Colors.blueAccent,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(12),

),

),

child: Text(

label,

style: TextStyle(fontSize: 18, color: Colors.white),

),
);

Step 2: Lib->Widgets -> Custom_counter_display.dart

Program:

// lib/widgets/custom_counter_display.dart

import 'package:flutter/material.dart';

class CustomCounterDisplay extends StatelessWidget {

final int counter;

const CustomCounterDisplay({

Key? key,

required this.counter,

}) : super(key: key);

@override

Widget build(BuildContext context) {

return Text(

'Counter: $counter',

style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),

);

Step 3: Lib->Widgets -> Custom_icon_text_row.dart

Program:
// lib/widgets/custom_icon_text_row.dart

import 'package:flutter/material.dart';

class CustomIconTextRow extends StatelessWidget {

final IconData icon;

final String text;

const CustomIconTextRow({

Key? key,

required this.icon,

required this.text,

}) : super(key: key);

@override

Widget build(BuildContext context) {

return Row(

children: [

Icon(icon, color: Colors.blueAccent),

SizedBox(width: 8),

Text(

text,

style: TextStyle(fontSize: 16, color: Colors.black),

),

],

);

}
}

Step 4: Lib->Widgets -> Custom_title.dart

Program:

// lib/widgets/custom_title.dart

import 'package:flutter/material.dart';

class CustomTitle extends StatelessWidget {

final String text;

const CustomTitle({Key? key, required this.text}) : super(key: key);

@override

Widget build(BuildContext context) {

return Text(

text,

style: TextStyle(

fontSize: 28,

fontWeight: FontWeight.bold,

color: Colors.blueAccent,

),

textAlign: TextAlign.center,

);

Step 5: Lib->Widgets -> labeled_icon.dart

Program:
// lib/widgets/labeled_icon.dart

import 'package:flutter/material.dart';

class LabeledIcon extends StatelessWidget {

final IconData icon;

final String label;

const LabeledIcon({

Key? key,

required this.icon,

required this.label,

}) : super(key: key);

@override

Widget build(BuildContext context) {

return Row(

mainAxisSize: MainAxisSize.min,

children: [

Icon(icon, color: Colors.blueAccent),

SizedBox(width: 8),

Text(

label,

style: TextStyle(fontSize: 16),

),

],

);
}

Output:

You might also like