Code examples (page 1)

This page is for code sharing…

Simple layout #001

Here is the code:

import 'package:flutter/material.dart';
import 'examples.dart';

void main() {
  runApp(ExamplesGallery());
}
class ExamplesGallery extends StatefulWidget {
  @override
  _ExamplesGalleryState createState() => _ExamplesGalleryState();
}
double widthVal = 0;
double heightVal = 0;
class _ExamplesGalleryState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Layout Examples'),
        ),
        body: SafeArea(
          child:
       Padding(padding: const EdgeInsets.all(8.0), child: Example()),
        ),
      ),
    );
  }
}

class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
        return Column(
            children: [
                 Center(
             child: Container(
             alignment: Alignment.center, height: 280, width: 300,
            decoration: BoxDecoration(
                          color: Colors.grey)
                           child: Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                                  children: [
                               Text('This will be the content of class Example'),
                                                 ],
                                             ),
                                       ),
                             ),
                        ],
         );
}
}

Here is the result:


Simple layout #002

Here is the code:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(
          child: Container(
            alignment: Alignment.center,
            height: 280,
            width: 300,
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.all(Radius.circular(20)),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.accessibility_new,
                  color: Colors.white,
                  size: 250,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Here is the result:


Simple layout #003

Here is the code:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: Container(
        color: Colors.blue,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
            SizedBox(height: 10),
            Container(color: Colors.black, width: 300, height: 400),
              SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
         sedButton(onPressed: () {}, child: Icon(Icons.arrow_back)),
                  SizedBox(width: 10),
                  RaisedButton(
                onPressed: () {}, child: Icon(Icons.arrow_forward)),
                ],
              ),
              SizedBox(height: 10),
            ],
          ),
        ),
      ),
    );
  }
}

Here is the result:


Simple layout #004

Here is the code:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300, height: 250,
        decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadiusDirectional.circular(20)),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Icon(Icons.accessibility_new, size: 130, color: Colors.white),
              Slidable(//From: https://pub.dev/packages/flutter_slidable/
                  child: Container(
                      width: 200, height: 70,
                      decoration: BoxDecoration(
                          color: Colors.white,
                       borderRadius: BorderRadiusDirectional.circular(20)),
                      child: Center(
                        child: Text('< Slide left',
                          textAlign: TextAlign.center,
                        ))),
                  actionPane: SlidableDrawerActionPane(),
                  actionExtentRatio: 0.25,
                  secondaryActions: [
                    Container(
                        width: 40,
                        height: 90,
                        child: FlatButton(
                          onPressed: () {},
                          child: Icon(Icons.delete),
                        ))])],
          ))));
  }
}

Here is the result:


Simple Layout #005

Here is the code:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: double.infinity,
              decoration: BoxDecoration(
                  color: Colors.blue, borderRadius: BorderRadius.circular(20)),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  children: [
                    CircleAvatar(
                      backgroundImage: NetworkImage(
           'https://theflutterthing.files.wordpress.com/2020/10/the-flutter-thing-logo.png'),),
                    SizedBox(width: 10),
                    Expanded(
                      child: TextField(
                        style: TextStyle(color: Colors.white),
                        decoration: InputDecoration(
                            hintText: “Please write something...",
                            filled: true,
                            fillColor: Colors.lightBlue,
                            border: OutlineInputBorder(
                                borderSide: BorderSide.none)),
                      ))
                  ],
                )))],
        ),
    );
  }
}

Here is the result:


Create your website with WordPress.com
Get started
%d bloggers like this: