Flutter Website :
Creating the website is much more easier now making use of flutter with the latest release of flutter version 2.0 web development is now stable.
A website plays a key role in the digital world where people can directly get to know the details regarding a business or service.
Every organization may have a website and associated mobile apps making use of flutter this is easily possible now.
As the code is same for all the apps that may be mobile apps, desktop apps even web apps too.
In this tutorial we will be dealing with creating a flutter website which can be also used to build mobile apps, desktop apps as well.
Dependency :
Add a dependency google fonts, and carousal slider to pubspec file and update it with latest version available.
dependencies:
flutter:
sdk: flutter
google_fonts:
carousel_slider:
image_slider.dart :
Here we will be dealing with the image slider in flutter website we have added a dependency by making use of it.
These images can also be provided from network url’s or from a locally stored images.
We have specified the parameters required for the image slider to work, i.e.., we have specified auto slide option to true and height, width and different properties required.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_website/repository/repo.dart';
class FullscreenSliderDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Builder(
builder: (context) {
final double height = MediaQuery.of(context).size.height;
return CarouselSlider(
options: CarouselOptions(
height: height,
viewportFraction: 2.0,
enlargeCenterPage: false,
autoPlay: true,
),
items: imgList.map((item) => Container(
child: Center(
child: Image.network(item, fit: BoxFit.cover, height: height,width: 1000,)
),
)).toList(),
);
},
),
);
}
}
menu_button.dart :
We have separated the code for buttons as there are more than one button it will be much easier to extract the widget.
And make re-usability to reduce the code and help in faster processing.
By creating a separate class we can access this button from any where through out the app, by providing the required parameters.
Title and Function is provided in the widget constructor.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class MenuWidget extends StatelessWidget {
MenuWidget({@required this.title, this.onPressed});
final String title;
final Function onPressed;
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: onPressed,
child: Text(
title,
style: GoogleFonts.comicNeue(
fontSize: 18.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
);
}
}
menu_items.dart :
Here in this class we have separated menu items to refactor the code and make it simple to use.
import 'package:flutter/material.dart';
import 'package:flutter_website/components/image_slider.dart';
import 'package:flutter_website/components/menu_button.dart';
import 'package:flutter_website/screens/about.dart';
import 'package:flutter_website/screens/contact.dart';
import 'package:flutter_website/screens/help.dart';
import 'package:flutter_website/screens/profile.dart';
class MenuItems extends StatelessWidget {
final Function loadScreen;
MenuItems({this.loadScreen});
@override
Widget build(BuildContext context) {
return Flexible(
child: Container(
color: Colors.blue,
height: 50.0,
alignment: Alignment.centerRight,
child: Wrap(
children: [
MenuWidget(
title: 'Home',
onPressed: (){
loadScreen(FullscreenSliderDemo());
},
),
MenuWidget(
title: 'About',
onPressed: (){
loadScreen(About());
},
),
MenuWidget(
title: 'Profile',
onPressed: (){
loadScreen(Profile());
},
),
MenuWidget(
title: 'Contact',
onPressed: (){
loadScreen(Contact());
},
),
MenuWidget(
title: 'Help',
onPressed: (){
loadScreen(Help());
},
),
],
),
));
}
}
logo_widget :
In this class we have separated the GestureDetector widget and made it a component that can be easily added to any screen.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class LogoWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Container(
margin: EdgeInsets.only(right: 40.0),
child: Row(
children: [
Image.asset(
"assets/logo.png",
width: 50.0,
),
Text(
'Androidcoding.in',
style: GoogleFonts.ropaSans(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.blue),
)
],
),
),
);
}
}
footer.dart :
Here we have separated the footer section and created a class for it.
import 'package:flutter/material.dart';
class FooterWidget extends StatelessWidget {
const FooterWidget({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
height: 50.0,
margin: EdgeInsets.symmetric(vertical: 50.0),
child: Align(
alignment: Alignment.center,
child: Text(
"Powered by Androidcoding.in",
style: TextStyle(color: Colors.white),
)),
);
}
}
repo.dart :
Here we are providing the list of images which are to be populated in image slider in flutter website.
Repos may contain data from remote or local storage’s.
final List<String> imgList = [ 'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80', 'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80', 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80', 'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80', 'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80', 'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80' ];
main.dart :
In main.dart we have provided the complete code for the flutter website design as well as functionality, which has a header section body and footer section.
Menu, image slider and different other widgets can be added to this part of the design.
import 'package:flutter/material.dart';
import 'package:flutter_website/components/footer.dart';
import 'package:flutter_website/components/image_slider.dart';
import 'package:flutter_website/components/logo_widget.dart';
import 'package:flutter_website/components/menu_items.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Widget screen = FullscreenSliderDemo();
loadScreen(Widget changedScreen){
setState(() {
screen = changedScreen;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Stack(
children: [
SingleChildScrollView(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 32.0),
child: Column(
children: [
Container(
margin: EdgeInsets.symmetric(vertical: 32.0),
child: Row(
children: [
LogoWidget(),
MenuItems(loadScreen: loadScreen,),
],
),
),
Container(
height: 400.0,
child: screen,
),
FooterWidget()
],
),
),
)
],
),
),
);
}
}
In the tutorial part 3 we have added screens to the existing project
about.dart :
We have provided a single text widget in about screen you may also add other widgets to the existing list.
import 'package:flutter/material.dart';
class About extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Text("About",style: TextStyle(fontSize: 20.0,fontWeight: FontWeight.w700),),
SizedBox(height: 20.0,),
Text("Welcome to my website androidcoding.in here we deal with programming tutorials you may visit our site for more interesting content",
style: TextStyle(fontSize: 16.0,fontWeight: FontWeight.w300),)
],
);
}
}
Using the above about screen create profile,contact and help screens.
Output :
This video will guide you through the creation of flutter website
