Написать свой виджет и использовать его как и основные виджеты Flutter.
// ignore: must_be_immutable
class CustomCard extends StatefulWidget {
final String title;
final String text;
bool isActive;
CustomCard({required this.title, required this.text, this.isActive = false, Key? key}) : super(key: key);
@override
_CustomCardState createState() => _CustomCardState();
}
class _CustomCardState extends State<CustomCard> {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.circular(15.0),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 20.0,
),
],
),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: [
Checkbox(
value: widget.isActive,
onChanged: (bool? value) {
setState(() {
widget.isActive = value!;
});
},
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.title,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w700,
height: 2.0,
),
),
Text(
widget.text,
style: TextStyle(
fontSize: 16.0,
height: 1.5,
),
),
],
),
),
Column(
children: [
GestureDetector(
onTap: () {
print('onTap to "Button 1"');
},
child: Container(
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
child: Text('Button 1'),
),
),
),
SizedBox(height: 10.0),
GestureDetector(
onTap: () {
print('onTap to "Button 2"');
},
child: Container(
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
child: Text('Button 2'),
),
),
),
],
),
],
),
),
);
}
}
И использовать его как:
CustomCard(title: 'Title', text: 'lorem ipsum dolor sit amet,\nconsectetur adipiscing elit'),
Flutter
в основном все строится наflex
виджетах (row
,column
, и тд.). Также естьGridView
, но это неGrid layout
...