Flutter Widget Descriptions (Detailed)

Text:

Properties:

• data: The text to be displayed.
• style: A TextStyle object that customizes the text appearance, such as font size, color, weight, style, and decoration.
• textAlign: The alignment of the text (left, right, center).
• maxLines: Limits the number of lines the text can be displayed on.
• overflow: Determines what happens when the text exceeds the boundary (truncate, hide, scroll).

Example:

Dart

Text(
  'Hello World!',
  style: TextStyle(
    fontSize: 20,
    color: Colors.red,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    decoration: TextDecoration.underline,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Button:

Properties:

• onPressed: The function that will be triggered when the button is clicked.
• child: The widget that will be displayed on the button (text, image, icon, etc.).
• color: The background color of the button.
• shape: The shape of the button (rectangular, round, oval, etc.).
• elevation: The shadow effect of the button.

Example:

Dart

ElevatedButton(
  onPressed: () {
    print('Button clicked!');
  },
  child: Text('Click'),
  color: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  elevation: 5,
)

Container:

Properties:

• color: The background color.
• width: The width.
• height: The height.
• margin: The margins.
• padding: The paddings.
• alignment: The content alignment.
• decoration: Decorations like border, shadow.

Example:

Dart

Container(
  color: Colors.blue,
  width: 100,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.symmetric(horizontal: 20),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Text('Hello World!'),
)

Image:

Properties:

• image: An ImageProvider object that specifies the source of the image to be displayed.
• width: The width of the image.
• height: The height of the image.
• fit: Determines how the image will fit into the container (stretch, shrink, crop).

Example:

Dart

Image(
  image: AssetImage('assets/image.png'),
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)

Row:

Properties:

• children: The list of widgets in the row.
• mainAxisAlignment: The horizontal alignment of the widgets (left, right, center, spaced).
• crossAxisAlignment: The vertical alignment of the widgets (top, bottom, center, spaced).

Example:

Dart

Row(
  children: [
    Text('Hello'),
    SizedBox(width: 10),
    Text('World!'),
  ],
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
)

Column:

Properties:

• mainAxisAlignment: The vertical alignment of the widgets (top, bottom, center, spaced).
• crossAxisAlignment: The horizontal alignment of the widgets (left, right, center, spaced).

Example:

Dart

Column(
  children: [
    Text('Hello'),
    SizedBox(height: 10),
    Text('World!'),
  ],
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
)

Stack:

Properties:

• children: The list of widgets that are stacked on top of each other.
• alignment: The positioning of the widgets (top left, top right, etc.).
• overflow: Determines what happens when widgets overflow the container (clip, scroll).

Example:

Dart

Stack(
  children: [
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Positioned(
      top: 10,
      left: 10,
      child: Text('Hello'),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Text('World!'),
    ),
  ],
  alignment: Alignment.center,
  overflow: Overflow.clip,
)

GestureDetector

Properties:

• onTap: The function that will be triggered when tapped.
• onDoubleTap: The function that will be triggered when double tapped.
• onLongPress: The function that will be triggered when long pressed.

Example:

Dart

GestureDetector(
  onTap: () {
    print('Tapped!');
  },
  onDoubleTap: () {
    print('Double tapped!');
  },
  onLongPress: () {
    print('Long pressed!');
  },
  child: Text('Hello World!'),
)

ListView:

Properties:

• children: The list of items in the list.
• scrollDirection: The direction of scrolling (vertical, horizontal).
• itemCount: The number of items in the list.
• itemBuilder: The function that creates a widget for each item.

Example:

Dart

ListView(
  children: [
    Text('Hello'),
    Text('World!'),
  ],
  scrollDirection: Axis.vertical,
  itemCount: 10,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)

This is just a small subset of the basic widgets in Flutter. For more information, please refer to the Flutter documentation.

Note:

• The descriptions in this document are limited to basic information. Each widget has more features and customization options available.
• You can find additional resources and tutorials online to help you learn more about Flutter and its widgets.

🌟 Follow Me! 🌟

Stay connected and get more content and updates by following me on social media:

• Twitter: birsalbe🐦
• LinkedIn: OğuzhanÖzdemir💼
• Instagram:m0bilecoding 📸
• You can follow these channels to stay informed about my new blog posts, projects, and more. For questions, comments, or collaboration offers, reach out to me through my social media accounts or at 7oughapps@gmail.com. Thank you for your support!