Flutter basic cooking website example

Flutter Cooking website example

I have tried Flutter for web development and here is my desktop screenshot.

Now let learn to create own website in the Flutter.

To create a website in Flutter you have to update the Flutter to v1.5 or latest, now if you have already the latest version you are ready to rock.

Now hit "flutter packages pub global activate webdev" to add/activate webdev package as global. If you are done with the above step go to your Flutter sdk directory "<flutter sdk directory>\.pub-cache\bin" and "<flutter sdk directory>\bin\cache\dart-sdk\bin" add them to your environment path as per your operating system.

Now go to vscode editor and click on View->Command Palette search for Flutter Web.

After the above step, it will create the necessary files to start work.

Create image_url.dart file inside lib folder.

image_url.dart

final imageUrl = ['image_1.png','image_2.png','image_3.png','image_4.png','image_5.png','image_6.png','image_7.png','image_8.png'];

Add your own URL from google or from anywhere else.

Now open main.dart file inside the lib folder.

main.dart

import 'package:flutter_web/material.dart';
import 'package:flutter_web/rendering.dart';
import 'package:ui_design/image_url.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: Text(
          'CookingShooking',
          style: TextStyle(
            color: Colors.black54,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        actions: <Widget>[
          Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'Home',
                style: TextStyle(
                  color: Colors.deepOrange,
                  fontSize: 18,
                  fontWeight: FontWeight.w300,
                ),
              ),
            ),
          ),
          Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'Service',
                style: TextStyle(
                  color: Colors.black54,
                  fontSize: 18,
                  fontWeight: FontWeight.w300,
                ),
              ),
            ),
          ),
          Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'About Us',
                style: TextStyle(
                  color: Colors.black54,
                  fontSize: 18,
                  fontWeight: FontWeight.w300,
                ),
              ),
            ),
          ),
          Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'Contact Us',
                style: TextStyle(
                  color: Colors.black54,
                  fontSize: 18,
                  fontWeight: FontWeight.w300,
                ),
              ),
            ),
          )
        ],
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        width: MediaQuery.of(context).size.width,
        color: Colors.grey[100],
        child: GridView.builder(
          itemCount: imageUrl.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: MediaQuery.of(context).size.width *
                  0.8 /
                  MediaQuery.of(context).size.height *
                  0.8),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 500,
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    blurRadius: 2,
                    spreadRadius: 2,
                    color: Colors.black.withOpacity(0.1),
                  ),
                ],
                borderRadius: BorderRadius.circular(10),
                image: DecorationImage(
                  fit: BoxFit.fill,
                  image: NetworkImage(
                    imageUrl[index],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

If you are done with the above step just hit "webdev serve" in terminal/cmd to run the website.

I have updated the project GitHub please check.

Thank you for reading.