02.02.2023 - ЖЗГ

Flutter: чтение файла из ресурсов

02.02.2023 Павел Грибов Flutter

Это возможно при использовании класса rootBundle. Для начала необходимо разместить файл в папку проекта. Далее в pubspec.yaml в секцию assets добавить ссылку на файл вида:

  assets:    
    - lib/files/user_agreement.txt

1 2	assets: - lib/files/user_agreement.txt

И далее в коде оформить загрузку файла:

import 'package:flutter/services.dart' show rootBundle;
...
class _LoginState extends State<Login> {
   String agreement_txt="";
...
   Future<void> loadAgreement() async {
     final loadAgreement = await rootBundle.loadString('lib/files/user_agreement.txt');
     setState(() {
       agreement_txt = loadAgreement;
     });
   }
...
@override
  void initState() {
     super.initState();
     loadAgreement();
  }
...
dia.SureDialog(context, "Политика конфиденциальности", agreement_txt, () {}, () {});

import 'package:flutter/services.dart' show rootBundle;

...

class _LoginState extends State<Login> {

String agreement_txt="";

...

Future<void> loadAgreement() async {

final loadAgreement = await rootBundle.loadString('lib/files/user_agreement.txt');

setState(() {

agreement_txt = loadAgreement;

});

}

...

@override

void initState() {

super.initState();

loadAgreement();

}

...

dia.SureDialog(context, "Политика конфиденциальности", agreement_txt, () {}, () {});

Оставить комментарий assets, flutter, ресурс, чтение файла

Flutter: как убрать полоски при выходе за рамки контейнера виджета?

02.02.2023 Павел Грибов Flutter

Чаще всего такие полоски появляются при появлении экранной клавиатуры в поле ввода или при выходе элементов виджета за видимые поля, например текста. Избежать этого, можно обернув большой виджет в виджет SingleChildScrollView:

SingleChildScrollView(
  child:Container(
...
  )
)

SingleChildScrollView(

child:Container(

...

)

В результате получится намного приятнее:

Оставить комментарий flutter, overflow, widget

Flutter: рисуем форму авторизации с маской ввода

02.02.2023 Павел Грибов Flutter

Задача: нарисовать форму ввода телефона для авторизации, с учётом маски и проверкой корректности ввода номера. Должно получиться что-то вроде:

Решение:

Для накладывания маски на TextFormField воспользуемся пакетом flutter_multi_formatter:

                                      Text('Введите номер телефона'),
                                      Container(
                                          padding: const EdgeInsets.all(0),
                                          width: 150,
                                          child:
                                          TextFormField(
                                                keyboardType: TextInputType.phone,
                                                inputFormatters: [
                                                  PhoneInputFormatter(
                                                  )
                                                ],
                                                style: TextStyle(fontSize: 16),
                                                controller: _controllerPhone
                                            ),
                                          ),

Text('Введите номер телефона'),

Container(

padding: const EdgeInsets.all(0),

width: 150,

child:

TextFormField(

keyboardType: TextInputType.phone,

inputFormatters: [

PhoneInputFormatter(

)

style: TextStyle(fontSize: 16),

controller: _controllerPhone

Для того, чтобы подсвечивать кнопку разным цветом, в зависимости от введенного текста, добавим флажек phone_is_ok и два стиля оформления, на которые будет переключаться стиль кнопки в зависимости от флажка:

   final ButtonStyle raisedButtonStyleFail = ElevatedButton.styleFrom(
     onPrimary: Colors.black87,
     primary: Colors.grey[300],
     minimumSize: Size(88, 36),
     padding: EdgeInsets.symmetric(horizontal: 16),
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(10)),
     ),
   );
   final ButtonStyle raisedButtonStyleSuccess = ElevatedButton.styleFrom(
     onPrimary: Colors.black87,
     primary: Colors.orangeAccent,
     minimumSize: Size(88, 36),
     padding: EdgeInsets.symmetric(horizontal: 16),
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(10)),
     ),
   );

final ButtonStyle raisedButtonStyleFail = ElevatedButton.styleFrom(

onPrimary: Colors.black87,

primary: Colors.grey[300],

minimumSize: Size(88, 36),

padding: EdgeInsets.symmetric(horizontal: 16),

shape: const RoundedRectangleBorder(

borderRadius: BorderRadius.all(Radius.circular(10)),

);

final ButtonStyle raisedButtonStyleSuccess = ElevatedButton.styleFrom(

onPrimary: Colors.black87,

primary: Colors.orangeAccent,

minimumSize: Size(88, 36),

padding: EdgeInsets.symmetric(horizontal: 16),

shape: const RoundedRectangleBorder(

borderRadius: BorderRadius.all(Radius.circular(10)),

);

Саму кнопку нарисуем как:

                                      Container(
                                          padding: const EdgeInsets.only(top: 16),
                                          width: 150,
                                          child:
                                              ElevatedButton(
                                                style: phone_is_ok?raisedButtonStyleSuccess:raisedButtonStyleFail,
                                                onPressed: (){},
                                                child: Text('Далее', style: TextStyle(fontSize: 15)),
                                          )   ,
                                      ),

Container(

padding: const EdgeInsets.only(top: 16),

width: 150,

child:

ElevatedButton(

style: phone_is_ok?raisedButtonStyleSuccess:raisedButtonStyleFail,

onPressed: (){},

child: Text('Далее', style: TextStyle(fontSize: 15)),

) ,

Переключение флажка будем делать, отслеживая введенный текст:

class _LoginState extends State<Login> {
   final scaffoldKey = GlobalKey<ScaffoldState>();
   final _controllerPhone = TextEditingController();
   bool phone_is_ok=false;
...
   @override
  void initState() {
     super.initState();
    _controllerPhone.text="+7";
    _controllerPhone.addListener(() {
      print(_controllerPhone.text);
      if (_controllerPhone.text.length==18){
        phone_is_ok=true;
      } else {
        phone_is_ok=false;
      };
setState(() {
     });
    });
  }

class _LoginState extends State<Login> {

final scaffoldKey = GlobalKey<ScaffoldState>();

final _controllerPhone = TextEditingController();

bool phone_is_ok=false;

...

@override

void initState() {

super.initState();

_controllerPhone.text="+7";

_controllerPhone.addListener(() {

print(_controllerPhone.text);

if (_controllerPhone.text.length==18){

phone_is_ok=true;

} else {

phone_is_ok=false;

};

setState(() {

});

}

Оставить комментарий flutter, TextFormField, маска ввода, форма ввода

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28