Flutter for Mobile Application Archives

ListTile Flutter

ListTile is generally used to populate a ListView in Flutter. ListTile makes populating ListView very simple.

Here we will cover all parameters of ListTile.

title

The title can take any widget. Usually, it will a Text Widget

              ListTile(
                title: Text("Ford"),
              ),

subtitle

The subtitle is the smaller text showing below the title

              ListTile(
                title: Text("Ford"),
                subtitle: Text("Super Car"),
              ),

leading

The leading property is the starting section of the ListTile. You add any widget. But usually, it will be an image or icon.

              ListTile(
                title: Text("Ford"),
                subtitle: Text("Super Car"),
                leading: Icon(Icons.time_to_leave),
              ),

trailing

Setting trailing places a widget at the end of the ListTile.

              ListTile(
                title: Text("Ford"),
                subtitle: Text("Super Car"),
                leading: Icon(Icons.time_to_leave),
                trailing: Icon(Icons.keyboard_arrow_right),
              ),

dense

This parameter makes the text smaller and packs together.

              ListTile(
                title: Text("Ford"),
                subtitle: Text("Super Car"),
                dense: true,
              ),

Thanks for Reading

DatePicker Flutter

Date Picker is very usefull fuction which shows a picker dialog to select date.

Please find below code for a Simple date Picker Fuction

  showDatePickrDialog(BuildContext context) {
    Future<DateTime> selectedDate = showDatePicker(
      context: context,
      initialDate: DateTime(2000),
      firstDate: DateTime(1900),
      lastDate: DateTime(2020),
      builder: (BuildContext context, Widget child) {
        return Theme(
          data: ThemeData.dark(),
          child: child,
        );
      },
    );
    selectedDate.then((value) {
      var date = DateFormat('dd-MM-yyyy').format(value);
      print("SELECTED_DATE==$date");
    });
  }

Thanks for reading!

Model Bottom Sheet In Flutter

A bottom sheet is a sheet that slides up from the bottom edge of the screen. Bottom sheets are displayed as a result of user-triggered action, and also it can reveal additional content.

Below is a small and simple function that returns a modelBottomSheet with a column having two child widgets.

Below find the final output of modelBottmSheet

Copy and paste the below code and use it with your requirements.

  _showBottomSheet() {
    showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
      return Container(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[

            Container(
              child: ListTile(
                title: Text("Gallery"),
                leading: Icon(Icons.image),
              ),
            ),
            Container(
              child: ListTile(
                title: Text("Camera"),
                leading: Icon(Icons.camera),
              ),
            )
          ],
        ),
      );
    }
    );
  }

Please Find the complete code below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Sheet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Bottom Sheet'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        
        title: Text(widget.title),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Open Bottom Sheet",style: TextStyle(color: Colors.white),),
          color: Colors.blue,
          onPressed: ()=>_showBottomSheet(),
        ),
      )
    );
  }
  _showBottomSheet() {
    showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
      return Container(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[

            Container(
              child: ListTile(
                title: Text("Gallery"),
                leading: Icon(Icons.image),
              ),
            ),
            Container(
              child: ListTile(
                title: Text("Camera"),
                leading: Icon(Icons.camera),
              ),
            )
          ],
        ),
      );
    }
    );
  }

}

That’s it! Now run the project!

The full source code is available here.

kotlincodes/model_bottom_sheet_flutter_example

model_bottom_sheet_flutter_example. Contribute to kotlincodes/model_bottom_sheet_flutter_example development by creating an account on GitHub.

Thanks for reading!

Custom TextField Flutter

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia and the web.

Text fields allow users to type text into an app. They are used to build forms, send messages, create search experiences, and more.

Here I share a custom Textfield class text_field.dart. Using this class you can use a unique and customizable text field all over your Flutter Application.

text_field.dart

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

class TextFieldCus extends StatelessWidget {
  final String hintText,text;
  final bool obscureText, enabled;
  final Function onChanged;
  final TextInputType textInputType;
  final int maxLength;
  final int maxlines;
  final TextInputAction textInputAction;
  final Color textColor;
  final String error;
  final Function onEditComplete;
  final List<TextInputFormatter> textInputFormatter;


  TextFieldCus(
      {this.textInputFormatter,this.maxLength,this.onEditComplete,this.error,this.textColor,this.textInputAction,this.maxlines,this.text,@required this.hintText, this.obscureText, this.onChanged, this.enabled,this.textInputType});

  @override
  Widget build(BuildContext context) {
    TextEditingController _controller=text!=null?TextEditingController(text: text):null;
    if(_controller!=null) {
      _controller.selection = TextSelection.fromPosition(
          TextPosition(offset: _controller.text.length));
    }
    OutlineInputBorder outlineInputBorder =  const OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.white, width: 0.0),
    );
    return Padding(
      padding: const EdgeInsets.fromLTRB(0, 6, 0, 6),
      child: TextField(
        onSubmitted:onEditComplete,
        maxLines: maxlines,
        style: TextStyle(color: textColor),
        keyboardType: textInputType,
        obscureText: obscureText == null ? false : obscureText,
        maxLength:maxLength!=null?maxLength:null ,
        onChanged: onChanged,
        enabled: enabled != null ? enabled : true,
        inputFormatters: textInputFormatter,
        controller: _controller!=null?_controller:null,
        textInputAction: textInputAction!=null?textInputAction:TextInputAction.done,
        decoration: InputDecoration(
            counterText: '',
          errorText: error,
          labelStyle: TextStyle(color: Colors.grey),
          enabledBorder: outlineInputBorder,
            labelText: hintText,
            hintStyle: TextStyle(color: Colors.white),
            border: outlineInputBorder
        ),
      ),
    );
  }
}

You can find the Github repo for this class here

kotlincodes/custom_text_filed_flutter

Contribute to kotlincodes/custom_text_filed_flutter development by creating an account on GitHub.