I want to change the button width when the user passes the parameter to the constructor, whether they want a full-width button or a normal-width button. However, I have tried to implement it, but the width of the button is not changing.
here's my code:
SmallButtonsElevated.dart
import 'package:flutter/material.dart';
class SmallButtonsElevated extends StatefulWidget {
final String buttonName;
final Color color;
final bool isFullWidth;
const SmallButtonsElevated({
required this.buttonName,
required this.color,
this.isFullWidth = false,
Key? key,
}) : super(key: key);
@override
State<SmallButtonsElevated> createState() => _SmallButtonsElevatedState();
}
class _SmallButtonsElevatedState extends State<SmallButtonsElevated> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
margin: EdgeInsets.all(16),
child: ElevatedButton(
onPressed: () {
// Handle button press
},
style: ElevatedButton.styleFrom(
backgroundColor: widget.color,
minimumSize: widget.isFullWidth
? const Size(double.infinity, 60)
: const Size(100, 60),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
child: Text(
widget.buttonName,
style: const TextStyle(color: Colors.white),
),
),
),
);
}
}
allButtons.dart
import 'package:flutter/material.dart';
import 'package:navbars/Buttons/smallButtons/smallButtonsElevated.dart';
class AllButtonsClass extends StatefulWidget {
const AllButtonsClass({super.key});
@override
State<AllButtonsClass> createState() => _AllButtonsClassState();
}
class _AllButtonsClassState extends State<AllButtonsClass> {
@override
Widget build(BuildContext context) {
List<Widget> functionList = [
const SmallButtonsElevated(
buttonName: 'Button',
color: Colors.redAccent,
),
];
return Scaffold(
body: ListView.builder(
itemCount: functionList.length,
itemBuilder: (context, index) {
return functionList[index];
},
),
);
}
}
I tried to pass the parameters in the constructor, but it did not work. The button width remained the same, as if it was set to full width instead of normal width. Can you please help me solve this issue?
Since you are using it inside Listview.builder it is taking up the full width. you can just wrap the button with centre it will work as expected.
import 'package:flutter/material.dart';
import 'package:navbars/Buttons/smallButtons/smallButtonsElevated.dart';
class AllButtonsClass extends StatefulWidget {
const AllButtonsClass({super.key});
@override
State<AllButtonsClass> createState() => _AllButtonsClassState();
}
class _AllButtonsClassState extends State<AllButtonsClass> {
@override
Widget build(BuildContext context) {
List<Widget> functionList = [
const Center(child:SmallButtonsElevated(
buttonName: 'Button',
color: Colors.redAccent,
),),
];
return Scaffold(
body: ListView.builder(
itemCount: functionList.length,
itemBuilder: (context, index) {
return functionList[index];
},
),
);
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments