flutter_components v1.0.3
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
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