lib
Creating a custom widget in Flutter often involves organizing your code into multiple files. Here's an example of how to create a custom button widget spread across multiple files: main.dart
, custom_button.dart
, and my_home_page.dart
. This demonstrates a basic Flutter application that uses a custom button widget:
main.dart
import 'package:flutter/material.dart';
import 'my_home_page.dart';
void main() {
runApp(
MaterialApp(
home: MyHomePage(),
),
);
}
my_home_page.dart
import 'package:flutter/material.dart';
import 'custom_button.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Custom Widget Example'),
),
body: Center(
child: CustomButton(
text: 'Click Me',
onPressed: () {
// Your button's action here
},
),
),
),
);
}
}
custom_button.dart
import 'package:flutter/material.dart';
class CustomButton extends StatelessWidget {
final String text;
final Function onPressed;
CustomButton({required this.text, required this.onPressed});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () => onPressed(),
child: Text(text),
);
}
}
This code demonstrates how you can create a custom button widget in the custom_button.dart
file, use it in the my_home_page.dart
file, and start the app in the main.dart
file. Make sure to import the necessary files in each Dart file as shown above.
To run this Flutter app, create these files in your project, and then execute main.dart
to start the app. The custom button widget (CustomButton
) can be easily reused throughout your application.
Last updated