0 purchases
Description:
flutter lab
Flutter package for FlutterLab, a UI design tool. Quickly change the parameters of widgets (color, size, alignment, padding, position, opacity, etc.)
Watch on Youtube
Install FlutterLab #
macOS → Download from App Store
Windows → FlutterLabSetup.exe (Download from github)
Usage #
import 'package:flutter_lab/flutter_lab.dart';
copied to clipboard
Wrap MyApp() with FlutterLab widget, to connect FlutterLab App
void main() {
WidgetsFlutterBinding.ensureInitialized();
// ...
runApp(
const FlutterLab(
child: MyApp(),
),
);
}
copied to clipboard
Change Container widget to LabContainer (add Lab prefix) to manage parameters from FlutterLab App
LabContainer(
// Container parameters
width:300,
height:200,
);
LabOpacity(
opacity: 0.5,
chid: Text("new"),
);
LabRow(
children: [
LabPadding(
padding: EdgeInsets.all(8),
child: Text("design"),
),
Stack(
children:[
LabPositioned(
child:Icon(Icons.add),
),
],
),
],
);
copied to clipboard
These widgets can be used
Container -> LabContainer
Padding -> LabPadding
Row -> LabRow
Column -> LabColumn
Stack -> LabStack
Align -> LabAlign
Positioned -> LabPositioned
SizedBox -> LabSizedBox
Opacity -> LabOpacity
Icon -> LabIcon
Text -> LabText
Detail #
In order to control specific widgets, the "name" parameter can be used.
"name" value and FlutterLab App widget name must be the same.
LabContainer(
name: "background", // Rename the Container widget to "background" in FlutterLab App
width: 300,
height: 200,
child: Row(
children:[
LabContainer(
name: "box", // Rename the Container widget to "box" in FlutterLab App
color: Colors.blue,
),
LabContainer(
name: "box",
color: Colors.blue,
),
],
),
);
LabOpacity(
name: "Opacity 2",
child: ...
);
LabPadding(
name: "box padding",
padding: EdgeInsets.all(8),
child: ...
);
copied to clipboard
Connection #
If needed, these parameters can be added to FlutterLab.
Hot restart is required after changing the parameters.
runApp(
const FlutterLab(
url: "192.168.1.200", //default "http://localhost"
port: 3000, //default 3000
child: MyApp(),
),
);
copied to clipboard
This package uses socket_io_client.
If required, the connection solutions here can be used.
https://pub.dev/packages/socket_io_client
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
