Bootstrap2Flutter

Explore examples and resources for creating Bootstrap-inspired designs in Flutter.

Overview

Bootstrap2Flutter is a repository that provides examples, code snippets, and resources for Flutter developers looking to incorporate Bootstrap-like designs into their applications. Whether you're new to Flutter or a seasoned developer, these examples can serve as a reference for achieving a modern and responsive user interface.

Contents

• Example Code: Find Flutter code snippets and small projects that demonstrate how to create Bootstrap-inspired components, layouts, and styles.

• Resources: Discover useful links, articles, and design guidelines to help you better understand and implement Bootstrap-like designs in Flutter.

Getting Started

1. Clone the repository:

   git clone https://github.com/arsybai/bootstrap2flutter.git

2. Explore the examples and resources available in the repository.

   cd bootstrap2flutter

3. Use the provided code snippets and projects as a reference for incorporating Bootstrap-like designs into your Flutter applications.

Example

As example if you want to use alert:

import 'package:flutter/material.dart';
import 'alert.dart'; // Import the alert file

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Bootstrap Alerts'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Use the showBootstrapAlert function to display alerts
              showBootstrapAlert(
                message: 'This is a primary alert!',
                alertType: BootstrapAlertType.primary,
              ),
              showBootstrapAlert(
                message: 'This is a secondary alert!',
                alertType: BootstrapAlertType.secondary,
              ),
              showBootstrapAlert(
                message: 'This is a success alert!',
                alertType: BootstrapAlertType.success,
              ),
              showBootstrapAlert(
                message: 'This is a danger alert!',
                alertType: BootstrapAlertType.danger,
              ),
              showBootstrapAlert(
                message: 'This is a warning alert!',
                alertType: BootstrapAlertType.warning,
              ),
              showBootstrapAlert(
                message: 'This is an info alert!',
                alertType: BootstrapAlertType.info,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Contribution

Contributions are welcome! If you have additional examples or resources to share, feel free to open issues, submit pull requests, or provide feedback.

Next

• Card
• Carousel
• Dropdowns
• Modal
• navbar