Архивы flutter - Страница 3 из 9

Flutter: обновление виджета одного класса из другого класса

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

Задача: в одном из фоново работающих классов (WebSocket клиент) изменилось значение отображаемое в другом классе. Необходимо вызвать setState для изменившегося виджета

Решение: воспользуемся классом StreamController. По сути это «конвеер», в который можно что-то ложить и объявлять «слушателя», который будет что-то делать если в «конвеер» попадет какое-либо значение.

Объявим в глобальных переменных контроллер, «конвеера»:

library me_flutter.globals;
var sup_controller = new StreamController<String>.broadcast();

1 2	library me_flutter.globals; var sup_controller = new StreamController<String>.broadcast();

Далее в классе ИЗ которого нужно сообщить что что-то изменилось, ложим в «конвеер» данные:

globals.sup_controller.add("new_message");

1	globals.sup_controller.add("new_message");

А в классе, который должен отображать изменения, объявим «слушателя» в initState:

class Support extends StatefulWidget {
  @override
  _SupportState createState() => _SupportState();
}
class _SupportState extends State<Support> {
  StreamSubscription?subscription;
  @override
  void initState() {
    super.initState();
    print("-оформляем подписку..");
      subscription = globals.sup_controller.stream.listen((index) {
        print("чтото пришло!");
        setState(() {
          _scrollDown();
        });
      });
....

class Support extends StatefulWidget {

@override

_SupportState createState() => _SupportState();

}

class _SupportState extends State<Support> {

StreamSubscription?subscription;

@override

void initState() {

super.initState();

print("-оформляем подписку..");

subscription = globals.sup_controller.stream.listen((index) {

print("чтото пришло!");

setState(() {

_scrollDown();

});

....

Не забудем при выходе из класса, убить подписку:

  @override
  void dispose() {
    print("--отменил подписку..");
    subscription?.cancel();
    super.dispose();
  }

@override

void dispose() {

print("--отменил подписку..");

subscription?.cancel();

super.dispose();

}

Оставить комментарий flutter, StreamController, изменение состояния, подписка

Flutter: периодический таймер

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

Во Flutter за таймеры отвечает класс Timer, а за периодический в частности Timer.periodic

Для примера использования, реализуем отчет переменной от 30 до 0:

import 'dart:async';
Timer?_timer; // ? говорит о том, что переменная в начале пути может быть null
int timercount=30;
bool timout_passed=false; //вышел таймаут разблокировки кнопки
...
_timer = Timer.periodic(Duration(seconds: 1), (Timer _) {
 if (timercount>0) {
    timercount = timercount - 1;
 };
 if (timercount==0) {
   timout_passed=true;
   _timer?.cancel();  // закончили отчёт
 }
});

import 'dart:async';

Timer?_timer; // ? говорит о том, что переменная в начале пути может быть null

int timercount=30;

bool timout_passed=false; //вышел таймаут разблокировки кнопки

...

_timer = Timer.periodic(Duration(seconds: 1), (Timer _) {

if (timercount>0) {

timercount = timercount - 1;

};

if (timercount==0) {

timout_passed=true;

_timer?.cancel(); // закончили отчёт

}

});

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

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 … 9 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
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
29	30