मुझे ऐसा कोई उदाहरण नहीं मिला है जिससे पता चलता हो कि इसके IconButtonसमान एक वृत्त कैसे बनाया जाए FloatingActionButton। क्या कोई सुझाव दे सकता है कि कस्टम बटन बनाने की आवश्यकता कैसे / क्या है FloatingActionButton?
स्पंदन में एक सर्कल आइकन बटन कैसे बनाएं?
जवाबों:
रॉ मटेरियलबटन बेहतर अनुकूल है जो मुझे लगता है।
RawMaterialButton(
onPressed: () {},
elevation: 2.0,
fillColor: Colors.white,
child: Icon(
Icons.pause,
size: 35.0,
),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)
हालांकि फ्लोटिंगएशनबटन भी एक विकल्प है, यह निश्चित रूप से बेहतर दृष्टिकोण है।
—
सबवेम्च
मुझे इस दृष्टिकोण के साथ एक बड़ी क्षैतिज पैडिंग मिल रही है, और मैं इसे कोई फर्क नहीं पड़ता कि मैं क्या कोशिश करता हूं। कोई विचार?
—
रॉड
मैंने RawMaterialButton बाधाओं की कमी संपत्ति का उपयोग करके इस मुद्दे को हल किया: BoxConstraints (minWidth: 36.0, maxWidth: 36.0, minHeight: 36.0, maxHeight: 36.0 यह शायद सबसे अच्छा समाधान नहीं है, लेकिन यह काम किया है।
—
Mualki
बटन के चारों ओर पैडिंग को पूरी तरह से हटाने के लिए
—
kashlo
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
मेरे लिए, मेरे द्वारा जोड़े गए पैडिंग को हटाने के लिए:
—
लियोनार्डो
constraints: BoxConstraints.expand(width: 42, height: 42),
आप यह कोशिश कर सकते हैं, यह पूरी तरह से अनुकूलन योग्य है।
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),
onTap: () {},
),
),
)
आउटपुट:
आपको केवल आकृति का उपयोग करने की आवश्यकता है: CircleBorder()
MaterialButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.camera_alt,
size: 24,
),
padding: EdgeInsets.all(16),
shape: CircleBorder(),
)
आप ऐसा करने के लिए इंकवेल का उपयोग कर सकते हैं :
सामग्री का एक आयताकार क्षेत्र जो स्पर्श करने के लिए प्रतिक्रिया करता है।
उदाहरण नीचे प्रदर्शित करता है कि कैसे उपयोग किया जाए InkWell। सूचना: आपको ऐसा StatefulWidgetकरने की आवश्यकता नहीं है। मैंने इसका उपयोग गिनती की स्थिति को बदलने के लिए किया।
उदाहरण:
import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
@override
_SettingPageState createState() => new _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
int _count = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new InkWell(// this is the one you are looking for..........
onTap: () => setState(() => _count++),
child: new Container(
//width: 50.0,
//height: 50.0,
padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
decoration: new BoxDecoration(
shape: BoxShape.circle,// You can use like this way or like the below line
//borderRadius: new BorderRadius.circular(30.0),
color: Colors.green,
),
child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.
//child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
),//............
),
),
);
}
}
आप के लाभ प्राप्त करना चाहते हैं splashColor, highlightColor, लपेट InkWellएक का उपयोग कर विजेट Materialसामग्री प्रकार चक्र के साथ विजेट। और फिर विजेट decorationमें निकालें Container।
परिणाम:
ब्लासंका, जानकारी के लिए धन्यवाद। मैंने इसके बजाय फ्लोटिंगएशनबटन का उपयोग करके समाप्त किया। लेकिन आपका समाधान भविष्य में अन्य परिदृश्यों के लिए काम आएगा।
—
एडमंड लोइइ
यह कोड "सर्कल" बटन (अब) नहीं बनाता है।
—
लूलूई
यदि आपको एक पृष्ठभूमि छवि की आवश्यकता है, तो आप IconButton के साथ CircleAvatar का उपयोग कर सकते हैं। BackgroundImage गुण सेट करें।
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
)
बटन के साथ उदाहरण:
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),
RawMaterialButton(
onPressed: () {},
constraints: BoxConstraints(),
elevation: 2.0,
fillColor: Colors.white,
child: Icon(
Icons.pause,
size: 35.0,
),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)
ध्यान दें constraints: BoxConstraints(), यह बाएं में पैडिंग की अनुमति नहीं है।
हैप्पी स्पंदन !!
वास्तव में एक उदाहरण है कि फ्लोटिंगएशनबटन के समान एक सर्कल IconButton कैसे बनाया जाए।
Ink(
decoration: const ShapeDecoration(
color: Colors.lightBlue,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.home),
onPressed: () {},
),
)
इस कोड नमूने के साथ एक स्थानीय प्रोजेक्ट बनाने के लिए, चलाएं:
flutter create --sample=material.IconButton.2 mysample
मेरा योगदान:
import 'package:flutter/material.dart';
///
/// Create a circle button with an icon.
///
/// The [icon] argument must not be null.
///
class CircleButton extends StatelessWidget {
const CircleButton({
Key key,
@required this.icon,
this.padding = const EdgeInsets.all(8.0),
this.color,
this.onPressed,
this.splashColor,
}) : assert(icon != null),
super(key: key);
/// The [Icon] contained ny the circle button.
final Icon icon;
/// Empty space to inscribe inside the circle button. The [icon] is
/// placed inside this padding.
final EdgeInsetsGeometry padding;
/// The color to fill in the background of the circle button.
///
/// The [color] is drawn under the [icon].
final Color color;
/// The callback that is called when the button is tapped or otherwise activated.
///
/// If this callback is null, then the button will be disabled.
final void Function() onPressed;
/// The splash color of the button's [InkWell].
///
/// The ink splash indicates that the button has been touched. It
/// appears on top of the button's child and spreads in an expanding
/// circle beginning where the touch occurred.
///
/// The default splash color is the current theme's splash color,
/// [ThemeData.splashColor].
final Color splashColor;
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return ClipOval(
child: Material(
type: MaterialType.button,
color: color ?? theme.buttonColor,
child: InkWell(
splashColor: splashColor ?? theme.splashColor,
child: Padding(
padding: padding,
child: icon,
),
onTap: onPressed,
),
),
);
}
}
मैंने इसका उपयोग किया क्योंकि मुझे सीमा-त्रिज्या और आकार का अनुकूलन पसंद है।
Material( // pause button (round)
borderRadius: BorderRadius.circular(50), // change radius size
color: Colors.blue, //button colour
child: InkWell(
splashColor: Colors.blue[900], // inkwell onPress colour
child: SizedBox(
width: 35,height: 35, //customisable size of 'button'
child: Icon(Icons.pause,color: Colors.white,size: 16,),
),
onTap: () {}, // or use onPressed: () {}
),
),
Material( // eye button (customised radius)
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomLeft: Radius.circular(50.0),),
color: Colors.blue,
child: InkWell(
splashColor: Colors.blue[900], // inkwell onPress colour
child: SizedBox(
width: 40, height: 40, //customisable size of 'button'
child: Icon(Icons.remove_red_eye,color: Colors.white,size: 16,),),
onTap: () {}, // or use onPressed: () {}
),
),
मैंने सही क्लिपिंग, ऊंचाई और सीमा के साथ एक संस्करण बनाया। इसे अनुकूलित करने के लिए स्वतंत्र महसूस करें।
Material(
elevation: 2.0,
clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.circular(50),
color: Colors.white,
child: InkWell(
onTap: () => null,
child: Container(
padding: EdgeInsets.all(9.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.blue, width: 1.4)),
child: Icon(
Icons.menu,
size: 22,
color: Colors.red,
),
),
),
)),
सामग्री समाधान नहीं:
final double floatingButtonSize = 60;
final IconData floatingButtonIcon;
TouchableOpacity(
onTap: () {
/// Do something...
},
activeOpacity: 0.7,
child: Container(
height: floatingButtonSize,
width: floatingButtonSize,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(floatingButtonSize / 2),
color: Theme.of(context).primaryColor,
boxShadow: [
BoxShadow(
blurRadius: 25,
color: Colors.black.withOpacity(0.2),
offset: Offset(0, 10),
)
],
),
child: Icon(
floatingButtonIcon ?? Icons.add,
color: Colors.white,
),
),
)
आप TouchableOpacity लाइब्रेरी के बजाय GestureDetector का उपयोग कर सकते हैं।
आप एक इमेज के साथ RaisedButton का उपयोग कर सकते हैं (उदाहरण के लिए सामाजिक लॉगिन के लिए) इस तरह (फ़ोकटबॉक्स के साथ आकार बॉक्स को निर्दिष्ट आकार पर छवि को नियंत्रित करने के लिए आवश्यक है):
FittedBox(
fit: BoxFit.scaleDown,
child: SizedBox(
height: 60,
width: 60,
child: RaisedButton(
child: Image.asset(
'assets/images/google_logo.png'),
shape: StadiumBorder(),
color: Colors.white,
onPressed: () {},
),
),
),
ClipOval(
child: MaterialButton(
color: Colors.purple,
padding: EdgeInsets.all(25.0),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
child: Text(
'1',
style: TextStyle(fontSize: 30.0),
),
),
),
इस कार्ड को आज़माएं
Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
),
child: Image.asset(
"assets/images/home.png",
width: 50,
height: 50,
),
)