Code examples (page 3)

Simple Layout #011

Here is the code:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
  //using flutter_staggered_grid_view package from
  //https://pub.dev/packages/flutter_staggered_grid_view
  //need to import: import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
  List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[
    const StaggeredTile.count(1, 2),
    const StaggeredTile.count(2, 2),
    const StaggeredTile.count(1, 1),
    const StaggeredTile.count(1, 2),
    const StaggeredTile.count(2, 2),
    const StaggeredTile.count(1, 2),
    const StaggeredTile.count(1, 1),
    const StaggeredTile.count(1, 1),
    const StaggeredTile.count(3, 1),
    const StaggeredTile.count(4, 1),
  ];
  List<Widget> _tiles = const <Widget>[
    const Card(
        color: Colors.red,
        child: InkWell(child: Center(child: const Icon(Icons.ac_unit)))),
    const Card(
        color: Colors.green,
        child: InkWell(child: Center(child: const Icon(Icons.access_alarm)))),
    const Card(
        color: Colors.yellow,
        child: InkWell(child: Center(child: const Icon(Icons.access_time)))),
    const Card(
        color: Colors.brown,
        child: InkWell(child: Center(child: const Icon(Icons.accessible)))),
    const Card(
        color: Colors.blue,
        child: InkWell(child: Center(child: const Icon(Icons.account_circle)))),
    const Card(
        color: Colors.pink,
        child: InkWell(child: Center(child: const Icon(Icons.add_a_photo)))),
    const Card(
        color: Colors.orange,
        child: InkWell(child: Center(child: const Icon(Icons.add_to_queue)))),
    const Card(
        color: Colors.grey,
        child: InkWell(
            child: Center(child: const Icon(Icons.airplanemode_active)))),
    const Card(
        color: Colors.lime,
        child:
            InkWell(child: Center(child: const Icon(Icons.alternate_email)))),
    const Card(
        color: Colors.amber,
        child: InkWell(child: Center(child: const Icon(Icons.android))))
  ];
  @override
  Widget build(BuildContext context) {
    return new StaggeredGridView.count(
      crossAxisCount: 4,
      staggeredTiles: _staggeredTiles,
      children: _tiles,
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
      padding: const EdgeInsets.all(7.0),
    );
  }
}


Here is the result:


Simple Layout #012

Here is the code:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
  //using table_calendar package from
  //https://pub.dev/packages/table_calendar
  //need to import: import 'package:table_calendar/table_calendar.dart';
  final Map<DateTime, List> _holidays = {
    DateTime(2020, 12, 1): ['Portuguese Independence Restauration'],
    DateTime(2020, 12, 8): ['Immaculate Conception'],
    DateTime(2020, 12, 25): ['Christmas day'],
  };
  //For the events
  Map<DateTime, List> _events = {
    DateTime.now().subtract(Duration(days: 2)): [
      'School meeting',
    ],
    DateTime.now().add(Duration(days: 25)): [
      'Payday',
    ],
  };
  CalendarController _calendarController = CalendarController();
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'List of events',
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 10),
        TableCalendar(
          calendarController: _calendarController,
          events: _events,
          holidays: _holidays,
          startingDayOfWeek: StartingDayOfWeek.monday,
          calendarStyle: CalendarStyle(
            selectedColor: Colors.deepOrange[400],
            todayColor: Colors.deepOrange[200],
            markersColor: Colors.brown[700],
            outsideDaysVisible: true,
          ),
          headerStyle: HeaderStyle(
            formatButtonTextStyle:
                TextStyle().copyWith(color: Colors.white, fontSize: 15.0),
            formatButtonDecoration: BoxDecoration(
              color: Colors.deepOrange[400],
              borderRadius: BorderRadius.circular(16.0),
            ),
          ),
        ),
      ],
    );
  }
}

Here is the result:


Simple Layout #013

Here is the code:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
  //using carousel_pro package from
  //https://pub.dev/packages/carousel_pro
  //need to import: import 'package:carousel_pro/carousel_pro.dart';
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text(
            'Carousel example',
            style: TextStyle(fontSize: 30),
          ),
          SizedBox(
            height: 10,
          ),
          SizedBox(
              height: 300.0,
              width: 300.0,
              child: Carousel(
                images: [
                  NetworkImage(
                  'https://theflutterthing.files.wordpress.com/2020/10/downloaded-1.jpg'),
                  NetworkImage(
         'https://theflutterthing.files.wordpress.com/2020/10/the-flutter-thing-logo.png'),
                  NetworkImage(
         'https://theflutterthing.files.wordpress.com/2020/10/the-flutter-thing-logo.png'),
                  NetworkImage(
                  'https://theflutterthing.files.wordpress.com/2020/10/downloaded-1.jpg'),
                ],
              )),
        ],
      ),
    );
  }
}

Here is the result:


Simple Layout #014

Here is the code:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
  var name = TextEditingController(text: null);
  var email = TextEditingController(text: null);
  var birthDate = TextEditingController(text: null);
  var phoneNumber = TextEditingController(text: null);
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Icon(
                Icons.contact_mail,
                size: 40,
              ),
              Text(
                'Create Contact',
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blueGrey[400],
              ),
              child: Center(
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                        child: Row(
                          children: [
                            Text(
                              'Name',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextFormField(
                          controller: name,
                          keyboardType: TextInputType.text,
                          decoration: InputDecoration(
                            hintText: '(Please input name)',
                            contentPadding: EdgeInsets.all(15.0),
                            border: InputBorder.none,
                            filled: true,
                            fillColor: Colors.grey[200],
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                        child: Row(
                          children: [
                            Text('Email',
                                style: TextStyle(fontWeight: FontWeight.bold)),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextFormField(
                          controller: email,
                          keyboardType: TextInputType.emailAddress,
                          decoration: InputDecoration(
                            hintText: 'email@email.com',
                            contentPadding: EdgeInsets.all(15.0),
                            border: InputBorder.none,
                            filled: true,
                            fillColor: Colors.grey[200],
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                        child: Row(
                          children: [
                            Text('Birth date',
                                style: TextStyle(fontWeight: FontWeight.bold)),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextFormField(
                          controller: birthDate,
                          keyboardType: TextInputType.datetime,
                          decoration: InputDecoration(
                            hintText: '1999-11-19',
                            contentPadding: EdgeInsets.all(15.0),
                            border: InputBorder.none,
                            filled: true,
                            fillColor: Colors.grey[200],
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                        child: Row(
                          children: [
                            Text('Phone Number',
                                style: TextStyle(fontWeight: FontWeight.bold)),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextFormField(
                          controller: phoneNumber,
                          keyboardType: TextInputType.phone,
                          decoration: InputDecoration(
                            hintText: '+351210000000',
                            contentPadding: EdgeInsets.all(15.0),
                            border: InputBorder.none,
                            filled: true,
                            fillColor: Colors.grey[200],
                          ),
                        ),
                      ),
                      RaisedButton(
                        onPressed: () {
                          setState(() {
                            //TODO: Insert record
                            //Clean fields
                            name = new TextEditingController(text: null);
                            email = new TextEditingController(text: null);
                            birthDate = new TextEditingController(text: null);
                            phoneNumber = new TextEditingController(text: null);
                          });
                        },
                        child: Text('Insert'),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Here is the result:


Simple Layout #015

Here is the code:

class Example extends StatefulWidget {
  @override
  _Example14State createState() => _Example14State();
}

class _ExampleState extends State<Example14> {
  double _bottom = 150;
  double _left = 150;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraint) {
        return Stack(
          fit: StackFit.expand,
          children: [
            //Main panel
            Container(
              height: constraint.maxHeight * 0.7,
              width: constraint.maxWidth,
              color: Colors.lightBlue,
            ),
            //Blue panel
            Positioned(
              bottom: (constraint.maxHeight * 0.25),
              top: 10,
              left: 10,
              child: Container(
                width: constraint.maxWidth - 20,
                color: Colors.lightBlue[900],
              ),
            ),
            //Enemy 1
            Positioned(
              top: 200,
              left: 130,
              width: constraint.maxWidth * 0.2,
              height: constraint.maxHeight * 0.2,
              child: Container(
                child: Icon(
                  Icons.blur_on,
                  size: 50,
                  color: Colors.red,
                ),
              ),
            ),
            //Enamy 2
            Positioned(
              bottom: 350,
              left: 30,
              width: constraint.maxWidth * 0.2,
              height: constraint.maxHeight * 0.2,
              child: Container(
                child: Icon(
                  Icons.blur_on,
                  size: 50,
                  color: Colors.red,
                ),
              ),
            ),
            //Enamyu 3
            Positioned(
              top: 50,
              right: 30,
              width: constraint.maxWidth * 0.2,
              height: constraint.maxHeight * 0.2,
              child: Container(
                child: Icon(
                  Icons.blur_on,
                  size: 50,
                  color: Colors.red,
                ),
              ),
            ),
            // Plane
            Positioned(
              bottom: _bottom,
              left: _left,
              width: constraint.maxWidth * 0.2,
              height: constraint.maxHeight * 0.2,
              child: Container(
                child: Icon(
                  Icons.airplanemode_active,
                  size: 50,
                ),
              ),
            ),
            // Button Left
            Positioned(
              bottom: (constraint.maxHeight * 0.1),
              left: 10,
              child: Container(
                width: 100,
                color: Colors.amber,
                child: FlatButton(
                  onPressed: () {
                    setState(() {
                      _left = _left - 10;
                    });
                  },
                  child: Icon(Icons.chevron_left),
                ),
              ),
            ),
            // Button Right
            Positioned(
              bottom: (constraint.maxHeight * 0.1),
              right: 10,
              child: Container(
                width: 100,
                color: Colors.amber,
                child: FlatButton(
                  onPressed: () {
                    setState(() {
                      _left = _left + 10;
                    });
                  },
                  child: Icon(Icons.chevron_right),
                ),
              ),
            ),
          ],
        );
      },
    );
  }
}

Here is the result:

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