Flutter Components

React Widgets: A collection of reusable and customizable React components inspired by Flutter widgets. Simplify your React app development with a set of intuitive and visually appealing widgets designed to enhance user interfaces. Each widget offers flexible options for customization, making it easy to create beautiful and interactive experiences."

Feel free to modify and adapt this description to best represent your React package and its features.

Table of Contents

• Installation
• Usage
• Features
• Contributing
• License

Installation

You can install flutter_components via npm:

npm install flutter_components

or

yarn add flutter_components

Usage

Here's an overview of the available components and their usage:

Container

A container component that provides layout and styling options.

import { Container } from "flutter_components";

const App = () => {
  return (
    <Container
      width="200px"
      height="200px"
      color="lightblue"
      padding="10px"
      margin="10px"
      alignment="center"
      borderRadius="4px"
      boxShadow="0 2px 4px rgba(0, 0, 0, 0.2)"
    >
      {/* Content */}
    </Container>
  );
};

export default App;

Column

A column layout component that arranges its children vertically.

import { Column } from "flutter_components";

const App = () => {
  return (
    <Column
      mainAxisAlignment="center"
      crossAxisAlignment="center"
    >
      {/* Children */}
    </Column>
  );
};

export default App;

GridViewBuilder

A grid view component that builds a grid of items.

import { GridViewBuilder } from "flutter_components";

const App = () => {
  const renderItem = (index) => {
    return (
      <div>
        {/* Item */}
      </div>
    );
  };

  return (
    <GridViewBuilder
      itemCount={10}
      itemBuilder={renderItem}
      gridDelegate={{
        crossAxisCount: 2,
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        childAspectRatio: 1,
      }}
    />
  );
};

export default App;

Image

An image component for displaying images.

import { Image } from "flutter_components";

const App = () => {
  return (
    <Image
      src="path/to/image.jpg"
      width="200px"
      height="200px"
      fit="cover"
      alignment="center"
      borderRadius="4px"
      onTap={() => {
        // Handle image click
      }}
    />
  );
};

export default App;

ListViewBuilder

A list view component that builds a list of items.

import { ListViewBuilder } from "flutter_components";

const App = () => {
  const renderItem = (index) => {
    return (
      <div>
        {/* Item */}
      </div>
    );
  };

  return (
    <ListViewBuilder
      itemCount={10}
      itemBuilder={renderItem}
      itemExtent="50px"
      padding={10}
      reverse={false}
      scrollDirection="vertical"
    />
  );
};

export default App;

Row

A row layout component that arranges its children horizontally.

import { Row } from "flutter_components";

const App = () => {
  return (
    <Row
      mainAxisAlignment="spaceBetween"
      crossAxisAlignment="center"
      mainAxisSize="max"
      verticalDirection="up"
      textDirection="ltr"
      verticalAlignment="fill"
    >
      {/* Children */}
    </Row>
  );
};

export default App;

Stack

A stack layout component that overlays its children.

import { Stack } from "flutter_components";

const App = () => {
  return (
    <Stack
      alignment="center"
      spacing={10}
      direction="vertical"
      fit="loose"
      style={{ background: "lightblue" }}
    >
      {/* Children */}
    </Stack>
  );


};

export default App;

Text

A text component for displaying text content.

import { Text } from "flutter_components";

const App = () => {
  return (
    <Text
      style={{ fontWeight: "bold", fontSize: "16px", color: "red" }}
      textAlign="center"
      textDecoration="underline"
    >
      Hello, World!
    </Text>
  );
};

export default App;

Icon

An icon component for displaying icons.

import { Icon } from "flutter_components";

const App = () => {
  return (
    <Icon
      icon="fa fa-star"
      size={24}
      color="gold"
      semanticLabel="Star Icon"
      semanticDescription="This is a star icon"
      onTap={() => {
        // Handle icon click
      }}
    />
  );
};

export default App;

TextField

A text field component for capturing user input.

import { TextField } from "flutter_components";

const App = () => {
  return (
    <TextField
      initialValue=""
      hintText="Enter text"
      labelText="Name"
      onChanged={(value) => {
        // Handle input change
      }}
      onSubmitted={(value) => {
        // Handle input submission
      }}
      keyboardType="text"
      obscureText={false}
    />
  );
};

export default App;

Contributing

Contributions are welcome! If you have any suggestions, improvements, or bug fixes, please create a pull request or open an issue.

License

This package is licensed under the MIT License.

Features

These are the widgets currently available Container Column, Row, Stack, Image, Text, Icon, TextField GridViewBuilder, ListviewBuilder