Skip to content

widget-catalog.md

Latest commit

 

History

History
593 lines (454 loc) · 8.39 KB

widget-catalog.md

File metadata and controls

593 lines (454 loc) · 8.39 KB

Widget Catalog

Complete reference of all supported widgets in FlutterJS.

Note

FlutterJS implements the most commonly used Flutter widgets. More widgets are being added regularly.

Tip

Want to know how these widgets render to HTML? Check out the VDOM Rendering Architecture.

Layout Widgets

Container

A versatile widget for styling and positioning.

Container(
  color: Colors.blue,
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.symmetric(vertical: 8.0),
  width: 200,
  height: 100,
  child: Text('Hello FlutterJS'),
)

Properties:

  • child — Single child widget
  • color — Background color
  • padding — Internal spacing
  • margin — External spacing
  • width, height — Dimensions
  • decoration — BoxDecoration for advanced styling
  • alignment — Child alignment

Center

Centers its child widget.

Center(
  child: Text('Centered Text'),
)

Padding

Adds padding around a child.

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Padded Text'),
)

SizedBox

A box with a specified size.

SizedBox(
  width: 100,
  height: 50,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)

Flexbox Widgets

Row

Arranges children horizontally.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Text('Rating'),
    Text('4.5'),
  ],
)

Properties:

  • mainAxisAlignment — Horizontal alignment
  • crossAxisAlignment — Vertical alignment
  • mainAxisSize — max or min
  • children — List of widgets

Column

Arranges children vertically.

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text('Title'),
    Text('Subtitle'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Action'),
    ),
  ],
)

Expanded

Expands a child to fill available space in a Row or Column.

Row(
  children: [
    Text('Left'),
    Expanded(
      child: Text('Fills remaining space'),
    ),
    Text('Right'),
  ],
)

Flexible

A more flexible version of Expanded with custom flex factor.

Row(
  children: [
    Flexible(
      flex: 2,
      child: Container(color: Colors.red, height: 100),
    ),
    Flexible(
      flex: 1,
      child: Container(color: Colors.blue, height: 100),
    ),
  ],
)

Spacer

Creates flexible empty space.

Row(
  children: [
    Text('Left'),
    Spacer(),
    Text('Right'),
  ],
)

Stack & Positioning

Stack

Overlays widgets on top of each other.

Stack(
  children: [
    Container(width: 300, height: 300, color: Colors.blue),
    Positioned(
      top: 50,
      left: 50,
      child: Container(width: 100, height: 100, color: Colors.red),
    ),
  ],
)

Positioned

Positions a child within a Stack.

Positioned(
  top: 10,
  right: 10,
  child: Icon(Icons.close),
)

Material Design Widgets

Scaffold

The basic structure for a Material Design page.

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(
    child: Text('Content'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Properties:

  • appBar — AppBar widget
  • body — Main content
  • floatingActionButton — FAB widget
  • drawer — Side navigation drawer (planned)
  • bottomNavigationBar — Bottom nav bar (planned)

AppBar

Application header bar.

AppBar(
  title: Text('Page Title'),
  backgroundColor: Colors.blue,
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
)

Card

Material Design card.

Card(
  elevation: 4.0,
  margin: EdgeInsets.all(8.0),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Card Content'),
  ),
)

Divider

A horizontal line divider.

Divider(
  height: 1,
  color: Colors.grey,
)

Buttons

ElevatedButton

Filled Material Design button.

ElevatedButton(
  onPressed: () {
    print('Button pressed');
  },
  child: Text('Click Me'),
)

TextButton

Flat Material Design button.

TextButton(
  onPressed: () {},
  child: Text('Text Button'),
)

IconButton

Button with an icon, no background.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
  tooltip: 'Like',
)

FloatingActionButton

Circular floating action button.

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
  backgroundColor: Colors.blue,
)

Text & Icons

Text

Displays text.

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Icon

Displays a Material Design icon.

Icon(
  Icons.star,
  size: 48,
  color: Colors.yellow,
)

Available Icons:

  • Icons.add, Icons.remove
  • Icons.home, Icons.settings, Icons.menu
  • Icons.favorite, Icons.star
  • Icons.search, Icons.close
  • And many more from Material Icons

Images

Image

Displays an image.

// Network image
Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
)

// Asset image
Image.asset(
  'assets/logo.png',
  width: 100,
  height: 100,
)

Input Widgets

TextField

Text input field.

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    hintText: 'John Doe',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('Input: $value');
  },
)

Checkbox

Boolean checkbox input.

Checkbox(
  value: isChecked,
  onChanged: (bool? value) {
    setState(() {
      isChecked = value ?? false;
    });
  },
)

Switch

Boolean switch toggle.

Switch(
  value: isSwitched,
  onChanged: (bool value) {
    setState(() {
      isSwitched = value;
    });
  },
)

Navigation

Navigator

Manages app navigation. See Routing & Navigation Guide for details.

// Push new route
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// Pop route
Navigator.pop(context);

MaterialPageRoute

Defines a route with Material Design transition.

MaterialPageRoute(
  builder: (context) => MyScreen(),
)

Gesture Detection

GestureDetector

Detects various gestures.

GestureDetector(
  onTap: () {
    print('Tapped');
  },
  onDoubleTap: () {
    print('Double tapped');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

Scrolling Widgets

ListView

Scrollable list of widgets.

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

ListView.builder

Efficiently builds long lists.

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

Common Patterns

EdgeInsets

Padding/margin values.

EdgeInsets.all(16.0)                        // All sides
EdgeInsets.symmetric(horizontal: 16.0)      // Left & right
EdgeInsets.symmetric(vertical: 8.0)         // Top & bottom
EdgeInsets.only(left: 8.0, top: 16.0)       // Specific sides

BoxDecoration

Advanced container styling.

BoxDecoration(
  color: Colors.white,
  borderRadius: BorderRadius.circular(8.0),
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.1),
      blurRadius: 4.0,
      offset: Offset(0, 2),
    ),
  ],
)

Widget Limitations

Warning

Not all Flutter widgets are supported yet. Focus is on commonly used widgets.

Planned additions:

  • ListView.separated
  • GridView
  • Drawer
  • BottomNavigationBar
  • TabBar / TabBarView
  • AlertDialog
  • SnackBar

See the GitHub Issues for the latest widget roadmap.

Next Steps