# Fundementials: Widgets

The majority of people prefers symmetrical and simple displays so it seems worthwhile to try and find a way to construct a default template for defining the widgets. While testing, I have realized that there are 2 ways to construct a Widget and use as a wrapper for items. 

The objective is to build a Widget, `MyMenuBox` that acts like a wrapper around Icon Buttons to display at the main page (page where the user enters the app). The Icon Buttons navigates the user to the corresponding pages. 

## Method 1: Widget as a StatelessWidget class

This constructs the Widget using OOP design. 

```dart
class MyMenuBox extends StatelessWidget {
  final IconData iconData;
  final String label;
  final VoidCallback onPressed;
  final Color foregroundColor = Colors.white;
  final Color backgroundColor = Colors.transparent;

  const MyMenuBox({
    super.key,
    required this.iconData,
    required this.label,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
      style: TextButton.styleFrom(
        foregroundColor: foregroundColor, // Text color
        backgroundColor: backgroundColor, // Background color
        // padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 32.0),
        //shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        //side: BorderSide(
        //  color: Colors.white.withOpacity(0.3),
        //), // Light border for glossy look
        elevation: 1,
      ),
      onPressed: onPressed,
      icon: Icon(iconData, size: 35, color: Colors.white),
      label: Text(label, style: TextStyle(color: Colors.white)),
    );
  }
}
```

## Method 2: Method 1: Stateful Widget using StatelessWidget Class

This constructs the Widget as standalone. 

```dart
// Standalone Widget version of the CoverTextButton 
Widget myMenuBox(IconData iconData, String label, VoidCallback onPressed) {
  return TextButton.icon(
    style: TextButton.styleFrom(
      foregroundColor: Colors.white, // Text color
      backgroundColor: Colors.white.withAlpha(1), // Background color
      // padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 32.0),
      //shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      //side: BorderSide(
      //  color: Colors.white.withOpacity(0.3),
      //), // Light border for glossy look
      elevation: 1,
    ),
    onPressed: onPressed,
    icon: Icon(iconData, size: 35, color: Colors.white),
    label: Text(label, style: TextStyle(color: Colors.white)),
  );
}

```

## Comparison 

The table below highlights the key differences in usage between the methods. 

<table><thead><tr><th width="132.4296875">Case</th><th>Method 1</th><th>Method 2</th></tr></thead><tbody><tr><td>Calling the Widget</td><td><p></p><pre class="language-dart" data-overflow="wrap"><code class="lang-dart">CoverTextButton(
  iconData: Icons.insights,
  label: 'Begin Reading',
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const HomePage()),
    );
  },    
</code></pre></td><td><pre class="language-dart" data-overflow="wrap"><code class="lang-dart">myMenuBox(Icons.insights, 'Start Reading', () {
  _navigateTo(context, const HomePage());
}),
</code></pre></td></tr></tbody></table>

## Another Example

{% code overflow="wrap" %}

```dart
// Implementing myTemplate where the CosmicBackground() is an animated background. This is useful when you want the animated background to stay across navigated pages. 

// MyTemplate as StatelessWidget 
class MyTemplate extends StatelessWidget {
  final Widget body;
  const MyTemplate({super.key, required this.body});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor:
          Colors.transparent, // Make Scaffold background transparent
      body: Stack(
        children: [
          const CosmicBackground(), // Cosmic background as default
          body,
        ],
      ),
    );
  }
}
// myTemplate as standalone function 
Widget myTemplate(body) {
  return Scaffold(
    backgroundColor: Colors.transparent,
    body: Stack(children: [const CosmicBackground(), body]),
  );
}

```

{% endcode %}

## Summary

* Method 1 (Class-Based Widget): Best for when your widget is part of a more structured and larger app, especially when you need state management, custom constructors, or default values. It’s ideal for complex, reusable widgets that may grow in functionality.
* Method 2 (Function-Based Widget): Suitable for simpler, smaller widgets that don’t need complex logic or state management. It’s a great choice for quick, reusable UI elements that are not likely to change much.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://whoamimi.gitbook.io/blog/projects/tarotarot-ai-fortune-teller/mobile-stack-flutter/fundamentals-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.